Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

koishi-plugin-canvas

Package Overview
Dependencies
Maintainers
3
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

koishi-plugin-canvas - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

lib/dep/lib/browser.d.ts

55

package.json
{
"name": "koishi-plugin-canvas",
"version": "0.1.3",
"description": "Provide `ctx.canvas` using skia-canvas for Koishi.js",
"author": "i'DLisT <me@idl.ist> (https://idl.ist)",
"description": "canvas service for Koishi",
"version": "0.2.0",
"license": "MIT",
"keywords": [
"koishi",
"koishi.js"
"main": "lib/index.js",
"author": "Anillc <void@anil.lc>",
"files": [
"lib"
],
"main": "dist/index.js",
"homepage": "https://github.com/idlist/koishi-plugin-canvas#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/idlist/koishi-plugin-canvas.git"
"koishi": {
"service": {
"optional": [
"nix"
],
"implements": [
"canvas"
]
}
},
"bugs": {
"url": "https://github.com/idlist/koishi-plugin-canvas/issues"
"peerDependencies": {
"koishi": "^4.15.0",
"koishi-plugin-downloads": "^0.1.1",
"koishi-plugin-nix": "^0.0.3"
},
"files": [
"dist",
"LICENSE"
],
"scripts": {
"build": "tsc && node build.js"
},
"dependencies": {
"skia-canvas": "^0.9.0"
"@koishijs/canvas": "^0.2.0",
"detect-libc": "^2.0.2",
"get-registry": "^1.1.0",
"glob": "^8.0.3",
"simple-get": "^4.0.1",
"string-split-by": "^1.0.0"
},
"devDependencies": {
"@types/node": "^16.0.0",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"esbuild": "^0.14.0",
"eslint": "^8.0.0",
"koishi": "^4.0.0",
"typescript": "^4.0.0"
"@types/node": "^20.8.2",
"typescript": "^5.2.2"
}
}
# koishi-plugin-canvas
使用 [skia-canvas](https://github.com/samizdatco/skia-canvas) 提供的简陋的 `ctx.canvas` 接口,主要是我自己用着方便(虽然其实并没有多方便)。
## build and publish
## 为什么?
Enter development environment
这个服务主要是为了解决 **字体注册** 的问题。为了使用本地字体,需要使用 `registerFont` (`node-canvas`) 或者 `Fontlibrary.use` (`skia-canvas`) 注册字体,但是这么做有个问题:同一个字体在不同的插件中会需要以不同的名字重复注册,因为不知道其他插件是否注册过这个字体。同名重复注册会导致报错,而且就算 `try catch` 了报错,也不知道其他插件用这个名字注册的字体是不是就是想用的字体。
将 `canvas` 独立成服务能一定程度上解决这个问题,因为可以在 `canvas` 服务的配置项中统一注册字体,然后在其他需要用到字体的插件中将字体暴露为配置项,进行统一配置。
## 安装方法
```shell
npm i koishi-plugin-canvas
```bash
nix develop
```
然后在配置文件或入口文件中将插件添加至你的机器人中。
### nereid
## 插件配置项
这个插件提供了以下配置项:
| 配置项 | 默认值 | 说明 |
| - | - | - |
| `fonts` | `[]` **\*1** | 注册字体 |
**\*1** 这个列表的每个元素的类型为
```ts
interface {
path: string
family: string
weight?: string
style?: string
}
```bash
$ build-nereid
$ pub-nereid
```
- `path`: 字体对于工作路径的相对路径
### plugin
- `family`: 字体注册成的名字
- `weight`(可选): 字体注册成的字重,如 700 或者 bold
- `style`(可选):字体注册成的样式,如斜体、花体等
**注:** 实际上,`skia-canvas` 注册字体的时候是 **无法设置** `weight` 和 `style` 的,所以不填也没关系。我也不知道为什么要留这两个选项在这里。
成功注册字体时,控制台会提示字体注册成功,以及字体的名字、字重和样式。
## 服务拓展方法
以下方法通过 `ctx.canvas` 暴露给插件:
#### `canvas.createCanvas(width?: number, height?: number)`
- `width`(可选): 画布的宽度
- `height`(可选): 画布的高度
- 返回值: `Canvas`
新建一个 `Canvas` 对象并返回它。下面是一个一般的范例,因为 `canvas` 的 `ctx` 和 `koishi` 的 `ctx` 重名,你需要在代码中给其中一个赋予不同的名字。
```js
const canvas = ctx.canvas.createCanvas // 这里的 ctx 是 koishi 的 ctx
const canvasCtx = canvas.getContext('2d')
```bash
$ copy
$ yarn tsc
$ yarn publish
```
`Canvas` 的用法请参照 MDN。
#### `canvas.registerFont(path: string, options: FontOptions)`
- `path`: 字体对于工作路径的相对路径
- `options`: 字体详情,各属性的意义和 **插件配置项** 中的意义一致。
```ts
interface FontOptions {
family: string
weight?: string
style?: string
}
```
注册本地字体。配置项中的 `fonts` 也是通过这个方法进行注册。
#### `canvas.loadImage(url: string)`
加载图片,详情见 [这里](https://github.com/samizdatco/skia-canvas#loadimage) 。可以快速加载网络图片或者本地图片为 `Canvas` 可用的对象。
## `Canvas` 拓展方法
以下方法扩展由 `ctx.createCanvas` 所创建的 `Canvas` 对象,并非标准方法,基本是我自己用起来方便所以整出来的。
#### `Canvas.renderResize(factor: number)`
- `factor`: 倍率
- 返回值:`Canvas`
将当前 `Canvas` 按一定倍率(`factor`)缩放渲染,然后返回选然后的新的 `Canvas`。这个方法的意义在于通过在创建的时候按 N 倍于设计大小作图,然后输出时缩放回设计大小,达成不同平台之间渲染结果在一定程度上的一致。
#### `Canvas.toBase64()`
- 返回值:`string` 被 Base64 编码的图片
将图片转化为 Base64 编码以供发送。
## 最终手段
这个插件也重新导出了 `skia-canvas` 本身。在有需要的情况下,可以直接从插件中获取原始方法。反正一时半会这玩意成不了规范,先随便写了。
```js
const { FontLibrary } = require('koishi-plugin-canvas')
```
## Q&A
- 这玩意怎么实现得这么粗糙?
因为就是这么粗糙。
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc