前言

当使用canvas完成横屏签名功能时，最后签名图片需要旋转角度，保证图片横铺

一、实现思路

思路是重新创建应该canvas，将图片填充进去，最后旋转canvas，最后保存旋转过会的图片。

二、详细代码

代码如下（示例）：

rotateBase64Img(src, edg) {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 () {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);console.log(canvas.toDataURL())//旋转之后图片base64}

调用方法穿入canvas绘制之后图片（src），以及旋转角度edg，最后得到旋转之后图片canvas.toDataURL()

总结

重点是绘制完再旋转.

canvas签名图片旋转相关推荐

canvas实现图片旋转
canvas实现图片旋转前言代码前言在上一篇实现了 canvas实现压缩图片.现在有需求变了,需要将图片旋转,旋转后正确的显示图片的位置(不能被其他元素遮住),等比例显示图片. 简单的实现如下 ...
移动端 canvas 横屏签名图片旋转
学习与前端实现电子签名是通过原生canvas实现,我这篇是对其进行了改造,记录一下效果图组件 components/esign.vue <template><div styl ...
canvas横屏签名，签名图片旋转90度生成base64
效果展示旋转原理 1.新建画布,画布长宽为图片较长边长的2倍 2.根据需要的旋转角度,确定旋转完之后需要复制图片的象限范围 3.对新建画布进行先移动(中心点位)后旋转处理 4.复制需要象限的图片 5 ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
TARO小程序canvas签名图片上传服务器
taro小程序实现签名上传,发现介绍的很少,所以整理出来给大家一些帮助.首先canvas画板会生成一个图片.这个图片只是一个路径.不同于自己写的上传接口.将图片data发送给后台.这里我们看不到临时路 ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（1）
文章过长,一篇无法保存. IE下及标准浏览器下的图片旋转(一)--滤镜,CSS3 3. canvas canvas 是html5中的新标签,使用canvas之前我们先看下它的定义:<canvas ...
IE下及标准浏览器下的图片旋转（二）—— Canvas（2）
文章过长,一篇无法保存 IE下及标准浏览器下的图片旋转(二)-- Canvas(1) 同样,作为最后,我们使用使用jquery也为canvas写个旋转demo: javascript: $(funct ...
canvas在舞台上点击后图片旋转_Canvas-图片旋转
众所周知canvas是位图,你可以在里面渲染你要的东西,不过你只能操作canvas的属性来进行编辑.就是说你并不能操作画进canvas的东西,例如我在canvas里添加一幅画,我现在想将那幅画移动10 ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...

canvas签名图片旋转

canvas签名图片旋转

前言

一、实现思路

二、详细代码

总结

canvas签名图片旋转相关推荐

最新文章

热门文章