sayll/canvas_x

canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。

canvas_x

canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。

默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。

使用方法

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

makeImage

高阶合成图片

可以接受三个类型：图片，文字，二维码

参数	类型	描述
options	object	MakeImageOptions（详情请见，核心配置项）
callback	function	回调参数：(error?: string, data?: string) => void

renderEditor

生成编辑界面

可以接受三个类型：图片，文字，二维码

参数	类型	描述
container	HTMLElement	一个容器元素节点
options	object	MakeImageOptions（详情请见，核心配置项
callback	function	回调参数：(base64: string) => void

MakeImageOptions

绘图核心配置项

参数	类型	描述
parts	array	各组成部分(ImageEntry , TextEntry , QRCodeEntry): 详细见基础类型参数
width	number	最终图片宽度，建议为显示容器的二倍
height	number	最终图片高度，建议为显示容器的二倍
background	string	画布底色
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 之间
clipOptions	object	详细见ClipOptions参数

ClipOptions

图片剪切所需参数

参数	类型	描述
x	number	相对于左上角的水平坐标
y	number	相对于左上角的垂直坐标
zoom	boolean	等比缩放图片
align	string	目前只支持'center';图片正中间；

TextEntry

表示一个文本部分。

参数	类型	描述
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 之间

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服务

canvas_x's Issues

demo跑不起来

Uncaught SyntaxError: Cannot use import statement outside a module

如何控制二维码logo大小呢

如何控制二维码logo大小呢

安卓10.0 生成的图片很小，并且文字显示不出来

你好，安卓10.0的华为浏览器(微信 uc 系统浏览器)除了文字生成不了，二维码、图片可以生成，位置也正常，但生成的图片只有九分之一大小左右

makeImage两次会出错

测试你的demo，当执行第二个makeImage会出错