摘要：无需任何第三方依赖，轻型工具库。绘制海报，生成带的二维码。默认重新编辑最终图片压缩比，默认基础类型参数表示一个图片部分。之间表示一个二维码部分参数类型描述指定为二维码类型要绘制的内容。通过控制边框颜色，默认为默认为容错等级。
canvas_x
无需任何第三方依赖，轻型工具库。
canvas绘制海报，生成带logo的二维码。也可生成编辑界面，用户自定义输入，一键生成等等
默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。项目地址
https://github.com/sayll/canvas_x使用方法 npm 下载使用
npm i -S @sayll/canvas_x
// js 片段
import canvas_x from "@sayll/canvas_x"
// TODO
canvas_x.makeImage({...})
直接引用
可直接通过script标签引入lib/canvas_x.js，也可当第三方模块引入。
通过script引入，可通过全局变量canvas_x直接使用。详情可见demo。接口
| 函数 | 描述 |
|---|---|
| makeImage(options, ...) | 绘制一个图片 |
| renderEditor(container, options, callback) | 创建编辑节点DOM |
高阶合成图片
可以接受三个类型：图片，文字，二维码
| 参数 | 类型 | 描述 |
|---|---|---|
| options | object | MakeImageOptions（详情请见，核心配置项） |
| callback | function | 回调参数：(error?: string, data?: string) => void |
生成编辑界面
可以接受三个类型：图片，文字，二维码
| 参数 | 类型 | 描述 |
|---|---|---|
| container | HTMLElement | 一个容器元素节点 |
| options | object | MakeImageOptions（详情请见，核心配置项 |
| callback | function | 回调参数：(base64: string) => void |
绘图核心配置项
| 参数 | 类型 | 描述 |
|---|---|---|
| parts | array | 各组成部分(ImageEntry , TextEntry , QRCodeEntry): 详细见基础类型参数 |
| width | number | 最终图片宽度，建议为显示容器的二倍 |
| height | number | 最终图片高度，建议为显示容器的二倍 |
| background | string | 画布底色 |
| buttonText | string | 编辑模式下，绘制画布按钮文案：null时，隐藏按钮。默认："绘制画布" |
| resetButtonText | string | 编辑模式下，重新编辑按钮文案：为空或null时，隐藏按钮。默认："重新编辑" |
| compress | number | 最终图片压缩比，默认0.8 |
表示一个图片部分。
| 参数 | 类型 | 描述 |
|---|---|---|
| type | string | 指定为图片类型："image" |
| url | string | 要绘制的图片地址，可以是 http: 或 data: 格式 |
| radius | number | 半径率，0-1之间 |
| padding | number | 内边距。通过background控制边框颜色，默认为"#fff" |
| background | string | 默认为"#fff" |
| width | number | 绘制的宽度 |
| height | number | 绘制的高度 |
| editable | boolean | 能否编辑，编辑模式下使用 |
| selectImage | function | 如需替换自己的资源为替换图片，可使用此参数； 参数返回一个 callback 接受你替换的图片 (base64或url) 注：当 editable 设置为 true 时，selectImage 将阻止默认 input[type=file]选取图片的默认行为 |
| x | number | 相对于左上角的水平坐标 |
| y | number | 相对于左上角的垂直坐标 |
| opacity | number | 透明度。0-1 之间 |
| clipOptions | object | 详细见ClipOptions参数 |
图片剪切所需参数
| 参数 | 类型 | 描述 |
|---|---|---|
| x | number | 相对于左上角的水平坐标 |
| y | number | 相对于左上角的垂直坐标 |
| zoom | boolean | 等比缩放图片 |
| align | string | 目前只支持"center";图片正中间； |
表示一个文本部分。
| 参数 | 类型 | 描述 |
|---|---|---|
| type | string | 指定为文本类型："text" |
| text | string | 要绘制的内容。使用 n 换行 |
| size | string | 字体大小 |
| color | string | 字体颜色 |
| bold | boolean | 是否加粗 |
| textAlign | string | 文本对齐方式，"center"、"left"、"right"，根据基准点（x,y）水平对齐。默认："left" |
| lineAlign | string | 文本对齐方式，"top"、"middle"、"bottom"，根据基准点（x,y）垂直对齐。默认："top" |
| editable | boolean | 能否编辑，编辑模式下使用 |
| x | number | 相对于左上角的水平坐标 |
| y | number | 相对于左上角的垂直坐标 |
| opacity | number | 透明度。0-1 之间 |
表示一个二维码部分
| 参数 | 类型 | 描述 |
|---|---|---|
| type | string | 指定为二维码类型："qrcode" |
| text | string | 要绘制的内容。网址需要使用 http: 开头 |
| padding | number | 内边距。通过background控制边框颜色，默认为"#fff" |
| background | string | 默认为"#fff" |
| level | number | 容错等级。1-5，数值越大容错越高 |
| logo | string | 二维码logo的地址,可以是 http: 或 data: 格式 |
| width | number | 绘制的宽度 |
| height | number | 绘制的高度 |
| x | number | 相对于左上角的水平坐标 |
| y | number | 相对于左上角的垂直坐标 |
| opacity | number | 透明度。0-1 之间 |
| npm run
阅读需要支付1元查看
|
|---|