js的Canvas逆时针旋转90度

一、前言：
移动端签字的时候，屏幕是横屏的状态。当签完字的时候，需要将图片逆时针旋转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'));};}

js的Canvas逆时针旋转90度相关推荐

安卓开发之自定义SeekBar竖立类（顺时针逆时针旋转90度）
类名:VerticalSeekBar public class VerticalSeekBar extends SeekBar {private boolean mIsDragging;private ...
tableview逆时针旋转90度。
2019独角兽企业重金招聘Python工程师标准>>> tableViews = [[UITableView alloc] initWithFrame:CGRectMake(0, 0 ...
长宽相等的矩阵（二维数组）逆时针旋转90度
将长宽相等的矩阵(二维数组)逆时针旋转90度,例如,有如下一个二维数组 00 10 20 30 40 50 60 01 11 21 31 41 51 61 02 12 22 32 42 52 62 0 ...
python 对 list[list] 矩阵进行逆时针旋转90度 matrix = list(map(list, zip(*matrix)))[::-1]
思路源于:Leetcode的螺旋矩阵题解 - Sui Xin 对于一个矩阵如下. matrix = [[1,2,3],[4,5,6],[7,8,9] ] 将其逆时针旋转90度为如下形式. res = ...
python将矩阵顺时针旋转90度_在Python中将方形矩阵逆时针旋转90度的程序
假设我们有一个正方形矩阵,我们必须将其逆时针旋转90度.147 258 369 那么输出将是789 456 1个23 为了解决这个问题,我们将遵循以下步骤-如果矩阵为空,则返回一个空白列表 n:=矩阵 ...
如何将EXCEL数据表里面的数据逆时针旋转90度
Sub Rotate_90_Degrees_Counterclockwise() '逆时针旋转90度 ' 宏5 宏 Dim ARR() ARR = Application.WorksheetFunct ...
Python 矩阵顺时针逆时针旋转90度
前言 Python中对矩阵进行顺时针或者逆时针旋转90度操作程序矩阵: matrix = [[1,2,3],[4,5,6],[7,8,9]] matrix 结果: [[1, 2, 3], [4, ...
matlab矩阵逆时针旋转90度
f=fenbu%f是原来的矩阵 newf = ones(size(f'))%旋转后的矩阵 lieshu = size(f,1)for j=[1:size(f,2)]%列数for i=[1:size(f ...
数组逆时针旋转 90 度
下面程序的功能是将一个 4×4 的数组进行逆时针旋转 90 度后输出,要求原始数组的数据随机输入,新数组以 4 行 4 列的方式输出

js的Canvas逆时针旋转90度

js的Canvas逆时针旋转90度相关推荐

最新文章

热门文章