canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。
默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。
可直接通过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 | 最终图片高度，建议为显示容器的二倍 |
| buttonText | string | 编辑模式下，绘制画布按钮文案：null时，隐藏按钮。默认：'绘制画布' |
| resetButtonText | string | 编辑模式下，重新编辑按钮文案：为空或null时，隐藏按钮。默认：'重新编辑' |
| compress | number | 最终图片压缩比，默认0.8 |
- ImageEntry: 表示一个图片部分。
| 参数 | 类型 | 描述 |
|---|---|---|
| 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 之间 |
- TextEntry: 表示一个文本部分。
| 参数 | 类型 | 描述 |
|---|---|---|
| type | string | 指定为文本类型：'text' |
| text | string | 要绘制的内容。使用 \n 换行 |
| size | string | 字体大小 |
| color | string | 字体颜色 |
| bold | boolean | 是否加粗 |
| align | string | 文本对齐方式，"left"、"right"、"center"，根据基准点（x,y）水平对齐。 |
| lineAlign | string | 文本对齐方式，"top"、"middle"、"bottom"，根据基准点（x,y）垂直对齐。 |
| editable | boolean | 能否编辑，编辑模式下使用 |
| x | number | 相对于左上角的水平坐标 |
| y | number | 相对于左上角的垂直坐标 |
| opacity | number | 透明度。0-1 之间 |
- QRCodeEntry: 表示一个二维码部分
| 参数 | 类型 | 描述 |
|---|---|---|
| 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 <script> |
note |
|---|---|
build |
打包文件 |
build:dev |
监听修改 |
browse |
启动server |
start |
start 整个项目server服务 |