canvas绘制海报+二维码,满足绝大部分场景

来源:转载

canvas_x

无需任何第三方依赖,轻型工具库。


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


项目地址

https://github.com/sayll/canvas_x


使用方法

可直接通过script标签引入 lib/canvas_x.js ,也可当第三方模块引入。


通过script引入,可通过全局变量 canvas_x 直接使用。详情可见demo。



接口

函数
描述


makeImage(options, ...)
绘制一个图片
renderEditor(container, options, callback)
创建编辑节点DOM

makeImage:高阶合成图片

可以接受三个类型:图片,文字,二维码



参数
类型
描述


options
array
ImageEntry,TextEntry或QRCodeEntry(详细见基础类型参数)
callback
function
回调参数:(error?: string, data?: string) => void

renderEditor:生成编辑界面

可以接受三个类型:图片,文字,二维码



参数
类型
描述


container
HTMLElement
一个容器元素节点
options
array
ImageEntry,TextEntry或QRCodeEntry(详细见基础类型参数)
callback
function
回调参数:(base64: string) => void

基础类型参数
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
是否加粗
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服务


分享给朋友:
您可能感兴趣的文章:
随机阅读: