页面手写签名实现：利用Canvas技术将签名保存为图片

<canvas id="canvas" width="800" height="600"></canvas>
<button onclick="reset();">取消</button>
<button onclick="savePic()">确定</button>

var canvas = document.getElementById('canvas');
canvas.width = '800';
canvas.height = '600';
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2; //直线的宽度状态设置
ctx.fillStyle = "#ffffff"; //直线的颜色状态设置
ctx.strokeStyle = "#058"; //直线的颜色状态设置
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.fillRect(0, 0, 800, 600);
let isDown = false
// 鼠标按下
canvas.addEventListener('mousedown', (e) => {
    isDown = true
    ctx.beginPath() //开始路径
    ctx.moveTo(e.offsetX, e.offsetY); //绘制点移动
})
// 鼠标移动
canvas.addEventListener('mousemove', (e) => {
    if (isDown) {
        ctx.lineTo(e.offsetX, e.offsetY); //绘制直线
        ctx.stroke() //描边
    }
})
// 鼠标抬起
document.documentElement.addEventListener('mouseup', (e) => {
    isDown = false
})
// 鼠标经过
canvas.addEventListener('mouseover', (e) => {
    canvas.style.cursor = 'crosshair'
})
// 鼠标离开
canvas.addEventListener('mouseout', (e) => {
    canvas.style.cursor = 'default'
})
// 取消
function reset() {
    ctx.fillRect(0, 0, 800, 600);
}
// 保存图片
function savePic() {
    var link = document.createElement("a");
    var imgData = canvas.toDataURL({
        format: 'png',
        quality: 1,
        width: 1920,
        height: 1080
    });
    var strDataURI = imgData.substr(22, imgData.length);
    var blob = dataURLtoBlob(imgData);
    var objurl = URL.createObjectURL(blob);
    link.download = "canvas.png";
    link.href = objurl;
    link.click();
}
 
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}