原生canvas实现签字功能

倾城1

1、html代码

1. <canvas id="canvas">您的机型版本不支持canvas</canvas>

复制代码

2、初始化画布

1. function __init() {
   
2.             var canvas = document.getElementById('canvas');
   
3.             var oGC = canvas.getContext('2d');
   
4.             var header_h = api.pageParam.h;
   
5.             var w = api.winWidth;
   
6.             var h = api.winHeight;
   
7.             canvas.width = w - 60;
   
8.             canvas.height = h - 80;
   
9.             var strokeColor = "blue";
   
10.             var isMouseDown = false;//是否按下鼠标
    
11.             var lastLoc = { x: 0, y: 0 };//上一次鼠标的坐标点
    
12. 
    
13.             canvas.addEventListener('touchstart', function (ev) {
    
14.                 ev.preventDefault()
    
15.                 isMouseDown = true;
    
16.                 lastLoc = windowToCanvas(ev.touches[0].clientX, ev.touches[0].clientY);
    
17. 
    
18.             })
    
19.             canvas.addEventListener('touchmove', function (ev) {
    
20.                 ev.preventDefault()
    
21.                 var curLoc = windowToCanvas(ev.touches[0].clientX, ev.touches[0].clientY);
    
22.                 oGC.beginPath();
    
23.                 oGC.moveTo(lastLoc.x, lastLoc.y);
    
24.                 oGC.lineTo(curLoc.x, curLoc.y);
    
25.                 oGC.strokeStyle = '#000';
    
26.                 oGC.lineWidth = 6;
    
27.                 oGC.lineCap = "round";
    
28.                 oGC.lineJoin = "round";
    
29.                 oGC.stroke();
    
30.                 lastLoc = curLoc;
    
31.             })
    
32.             canvas.addEventListener('touchend', function (ev) {
    
33.                 ev.preventDefault()
    
34.                 isMouseDown = false;
    
35.             })
    
36.         }

复制代码

2-1、拿到当前点击的坐标点

1. function windowToCanvas(x, y) {
   
2.             // 拿到canvas距离文档里offsetLeft 和 offsetTop
   
3.             var clientRect = canvas.getBoundingClientRect();
   
4.             return {
   
5.                 x: Math.round(x - clientRect.left),
   
6.                 y: Math.round(y - clientRect.top)
   
7.             }
   
8.         }

复制代码

2-2、清空画布

1. function reset() {
   
2.             var canvas = document.getElementById('canvas');
   
3.             var oGC = canvas.getContext('2d');
   
4.             var header_h = api.pageParam.h;
   
5.             var w = api.winWidth;
   
6.             var h = api.winHeight;
   
7.             oGC.clearRect(0, 0, w - 60, h - 80);
   
8.         }

复制代码

3、处理画布，回调图片

1. function rotateBase64(data,cb) {
   
2.             var imgView = new Image();
   
3.             imgView.src = data;
   
4.             var canvas = document.createElement('canvas');
   
5.             var context = canvas.getContext('2d');
   
6.             var cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; // 裁剪坐标
   
7.             imgView.onload = function() {
   
8.                 var imgW = imgView.width;
   
9.                 var imgH = imgView.height;
   
10.                 var size = imgH;
    
11.                 canvas.width = size * 2;
    
12.                 canvas.height = size * 2;
    
13.                 cutCoor.sx = size;
    
14.                 cutCoor.sy = size - imgW;
    
15.                 cutCoor.ex = size + imgH;
    
16.                 cutCoor.ey = size + imgW;
    
17.                 context.translate(size, size);
    
18.                 context.rotate(Math.PI / 2 * 3);
    
19.                 context.drawImage(imgView, 0, 0);
    
20.                 const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
    
21.                 canvas.width = imgH;
    
22.                 canvas.height = imgW;
    
23.                 context.putImageData(imgData, 0, 0);
    
24.                 cb && cb(canvas.toDataURL('image/png'))
    
25.             };
    
26.         }

复制代码

4、确认提交

1. function submit() {
   
2.             var canvas = document.getElementById('canvas');
   
3.             var oGC = canvas.getContext('2d');
   
4.             var strDataURI = canvas.toDataURL();
   
5.             rotateBase64(strDataURI,function(img){
   
6. console.log(img)
   
7.             })
   
8.         }

复制代码