javascript+canvas实现数字签名功能

思路：使用canvas的绘制功能加上鼠标事件获取坐标就能实现了

数字签名.png

代码：

canvasSignature.js

function CreateCanvasSignature({ container, width = 512, height = 512 }) {
    let that = this;
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.style.cssText = `
        background-color: #000;
    `
    container.appendChild(canvas);
    this.ctx = canvas.getContext('2d');
    this.canvas = canvas;
    this.width = width;
    this.height = height;
    this.startPoint = null;
    this.endPoint = { x: 0, y: 0 };
    const mousemove = (e) => {
        let { offsetX, offsetY } = e;
        this.endPoint = {
            x: offsetX,
            y: offsetY
        }
        requestAnimationFrame(that.draw.bind(that))

    }
    const mousedown = (e) => {
        let { offsetX, offsetY } = e;
        this.startPoint = {
            x: offsetX,
            y: offsetY
        };
        canvas.addEventListener('mousemove', mousemove)
    }

    const mouseup = (e) => {
        canvas.removeEventListener('mousemove', mousemove)
    }
    canvas.addEventListener('mousedown', mousedown);
    canvas.addEventListener('mouseup', mouseup);
    canvas.addEventListener('mouseleave', mouseup);
}

CreateCanvasSignature.prototype = {
    clear() {
        let { ctx, width, height } = this;
        ctx.clearRect(0, 0, width, height)
    },
    createSignature() {
        return this.canvas.toDataURL()
    },
    draw() {
        let { ctx, startPoint, endPoint } = this;
        if (!startPoint) {
            startPoint = endPoint;
        }
        ctx.strokeStyle = 'white';
        // ctx.strokeStyle = 'red';
        ctx.beginPath();
        ctx.moveTo(startPoint.x, startPoint.y);
        ctx.lineTo(endPoint.x, endPoint.y);
        ctx.closePath();
        ctx.stroke();
        this.startPoint = endPoint;
    }
}


function CreateButton({ container, text = '重写' }) {
    const button = document.createElement('button');
    button.textContent = text;
    button.style.cssText = `
        padding: 5px 15px;
        cursor: pointer;
        background-color: #3F85FF;
        color: #fff;
        margin-left: 10px;
    `
    container.appendChild(button);
    this.button = button;
}

function CreateImage({ container, src, width = 200, height = 200 }) {
    const img = document.createElement('img');
    img.src = src;

    img.style.cssText = `
        width: ${width}px;
        height: ${height}px;
    `
    container.appendChild(img);
    this.img = img;
}

CreateImage.prototype = {
    setSrc(src){
        this.img.src = src;
    },
    clear(){
        this.img.remove();
    }
}

export default function main() {
    let createSignImg = null;
    const canvasSignature = new CreateCanvasSignature({
        container: document.querySelector('#canvas-signature')
    });
    const rewriteButton = new CreateButton({
        container: document.querySelector('#canvas-signature'),
    });
    rewriteButton.button.addEventListener('click', () => {
        canvasSignature.clear();
        createSignImg && createSignImg.clear();
        createSignImg = null
    })

    const createSignButton = new CreateButton({
        container: document.querySelector('#canvas-signature'),
        text: '生成签名'
    });
    createSignButton.button.addEventListener('click', () => {
        let url = canvasSignature.createSignature();
        // console.log(url);
        if (!createSignImg) {
            createSignImg = new CreateImage({
                container: document.querySelector('#create-signature'),
                src: url,
                width: 512,
                height: 512,
            })
        }
        createSignImg.setSrc(url);
    })

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            background-color: #000;
        }
        #canvas-signature{
            display: flex;
            align-items: flex-end;
            
        }
        #create-signature img{
            background-color: #000;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="canvas-signature">

    </div>
    <div id="create-signature">

    </div>
    <script type="module">
        import main from './canvasSignature.js'
        main();
    </script>
</body>
</html>