javascript+canvas实现数字签名功能
思路:使用canvas的绘制功能 加上 鼠标事件获取坐标就能实现了
代码:
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>
Over