wenqingxiaoyou / canvas-sign

打造canvas签名组件

canvas-sign

打造canvas签名组件

Use

npm install canvas-sign-online --save

支持pc和移动端，核心代码plugin/canvas-sign.js
第一步初始化并且设置容器大小：

import CanvasSign from "canvas-sign-online";

const cv = document.getElementById("canvas");
const canvas = new CanvasSign(cv);
/** 注意：canvas的宽高需要在属性上设置，而不是style */
cv.width = '500';
cv.height = '500';

第二步画笔设置样式：

canvas.setLineStyle({
    strokeStyle: "black",
    lineWidth: 2,
    shadowBlur: '1',
    lineCap: 'round',
    shadowColor: 'black',
    lineJoin: 'round',
})

接下来就是自由绘制了。
绘制完成过后导出：

const img = document.createElement("a");
img.href = canvas.getPNGImage();
img.download = "canvas-sign.png";
img.style.display = "none";
document.body.appendChild(img);
img.click();
document.body.removeChild(img);

导入json：

canvas.loadJson(dataJson);

api列表：

api	Description	Note
getPNGImage	png格式导出
getJPGImage	jpg格式导出
clear	清除画板
setLineStyle	设置画笔样式	同原生canvas 样式和颜色
toJson	导出json
loadJson	加载已经导出的json	toJson().dataJson

最后，祝使用愉快！

Realization idea

实现思路以及细节参考：canvas在线签名插件
如果有什么问题或好的想法欢迎在参与讨论。