koishi-plugin-imagify

npm Rating

将你的 Bot 输出转换为图片!

Warning

安全性警告

由于渲染的方式的特殊性,它有可能导致 XSS 攻击。请只对可信任内容来源进行渲染,绝不要将用户提供的内容进行渲染。

  • 譬如 echo 指令拥有 -E 选项来由用户自由生成消息元素以供测试。如果需要对 echo 指令之类允许用户自由输入的插件输出进行图片生成,请尽量添加权限以限制,防止恶意用户利用该指令进行攻击。

安装

插件市场搜索 imagify 安装

配置项

基础设置

fastify

  • 类型:boolean
  • 默认值:false

是否使用快速渲染模式,这会显著提高并发性能及渲染性能,但会提高内存占用。

pagepool

  • 类型:number
  • 默认值:5

初始化时预先创建的页面数量,该值越大,初始化时占用的内存越大,但是在高并发时的性能会更好。

advanced

  • 类型:boolean
  • 默认值:false

开启高级设置

高级设置

rules

  • 类型:ImageRule[][]

规则模式,详见规则模式

cache.enable

  • 类型:boolean
  • 默认值:false

启用缓存模块

cache.driver

  • 类型:CacheModule
  • 默认值:CacheModule.NATIVE

缓存模式,推荐使用 CacheModule.CACHE

cache.databased

  • 类型:boolean
  • 默认值:false

以数据库作为低频缓存,启用后会在数据库中创建 imagify 表。

cache.threshold

  • 类型:number
  • 默认值:3

缓存阈值,当缓存命中次数达到该值时,会将该缓存提升为高频缓存,详见缓存规则

[WIP] cache.rule

  • 类型:CacheRule[]

缓存命中规则,详见缓存规则

卡片设置

background

  • 类型:string

背景图片 URL

blur

  • 类型:number
  • 默认值:10

背景图片模糊度

style

  • 类型:string

自定义样式,详见自定义样式

规则模式

规则模式是以一套 AND ( OR ) 方式执行的图形化输出判断模式,相比旧版本的字数判断,支持了更多场景下的细粒度需求。

  • AND 规则:AND 规则下需要满足所有的 rules[*] 才会进行渲染
  • OR 规则:只需满足表格内任意规则即视为成功

规则类型

目前规则支持如下类型:

  • 平台名称
  • 用户 ID
  • 群组 ID
  • 群聊 ID
  • 机器人 ID
  • 指令名称
  • 内容文本
  • 内容文本字数

规则计算方式

目前规则支持如下计算方式:

  • 正则:正则匹配
  • 等于:左侧类型内容完全等于右侧匹配内容
  • 不等于
  • 包含:左侧类型内容中包含有右侧匹配内容
  • 不包含
  • 数学(高级):数学计算,在右侧匹配内容中格式为:GT:114514。目前支持以下函数
    • GT:大于
    • GE:大于等于
    • LT:小于
    • LE:小于等于

缓存规则

缓存规则是一套用于判断是否缓存的规则,目前支持如下规则:

由于大部分输出都是动态的,目前仅支持对指令的缓存。

  • 指令名称

自定义样式

在 V2 版本中,加入了对自定义 css 样式的支持,可以在 style 配置项中自定义图片样式。

与 HTML 有差异的 消息元素 都会转为对应 HTML 元素,并添加一个 _[原名称] 的 class,例如 <text> 元素会被转换为 <span class="_text"></span>

元素转换

4.16.4 版本之后,Koishi 将 <image> 元素转换为 <img> 元素,但是依旧对两者添加了相同的 class,以保证兼容性。

Koishi 消息元素 HTML 标签
<text> <span class="_text"></span>
<image url="https://koishi.chat/logo.png"> <img class="_image" src="https://koishi.chat/logo.png">
<template> <div class="_template"></div>
<random> <span class="_random"></span> (该元素会进行随机选取后渲染)

与 HTML 元素同名的消息元素则会原样保留,且不会添加 class。

图片 HTML 结构

为方便理解 css 在何处有用,下面是插件的原始模板 HTML:

...
<div class="text-card" style="backdrop-filter: blur({blur}px)">
  <!-- 所有的消息元素都会按顺序排列 -->
  {elements}
</div>
<footer>Generated by Koishi {kVersion} / koishi-plugin-imagify v{pVersion}</footer>
...