koishi-plugin-imagify

koishi-plugin-imagify

将你的 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>
...