中国数据网站空间/日结app推广联盟

一、前言：
移动端签字的时候，屏幕是横屏的状态。当签完字的时候，需要将图片逆时针旋转90度，然后把图片上传至服务器

二、思路：
（1）获取到图片的宽度、长度
（2）设置新的 Canvas 的宽度、长度
（3）将内容重新绘制再新画布上
（4）将新画布内容转 base64

三、逆时针旋转代码：

  //签完名的图片旋转处理function rotateBase64Img(src: string, edg: number, callback: (e: any) => any) {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var imgW; //图片宽度var imgH; //图片高度var size; //canvas初始大小if (edg % 90 != 0) {console.error('旋转角度必须是90的倍数!');throw '旋转角度必须是90的倍数!';}edg < 0 && (edg = (edg % 360) + 360);const quadrant = (edg / 90) % 4; //旋转象限const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标var image = new Image();image.crossOrigin = 'anonymous';image.src = src;image.onload = function () {console.log('加载了');imgW = image.width;imgH = image.height;size = imgW > imgH ? imgW : imgH;canvas.width = size * 2;canvas.height = size * 2;switch (quadrant) {case 0:cutCoor.sx = size;cutCoor.sy = size;cutCoor.ex = size + imgW;cutCoor.ey = size + imgH;break;case 1:cutCoor.sx = size - imgH;cutCoor.sy = size;cutCoor.ex = size;cutCoor.ey = size + imgW;break;case 2:cutCoor.sx = size - imgW;cutCoor.sy = size - imgH;cutCoor.ex = size;cutCoor.ey = size;break;case 3:cutCoor.sx = size;cutCoor.sy = size - imgW;cutCoor.ex = size + imgH;cutCoor.ey = size + imgW;break;}ctx?.translate(size, size);ctx?.rotate((edg * Math.PI) / 180);//drawImage向画布上绘制图片ctx?.drawImage(image, 0, 0);//getImageData() 复制画布上指定矩形的像素数据var imgData = ctx?.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);if (quadrant % 2 == 0) {canvas.width = imgW;canvas.height = imgH;} else {canvas.width = imgH;canvas.height = imgW;}//putImageData() 将图像数据放回画布ctx?.putImageData(imgData, 0, 0);callback(canvas.toDataURL('image/png'));};}