前言
满足跨域需求的图片向右或向左转动90°
涉及知识点
canvas的rotate 方法和drawImage方法
- CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。
- Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。
举向右旋转为例子，
rotate方法的旋转中心点一直是 canvas 的起始点，向右旋转90°后需要让旋转后的图片向右平移一个原来图片（即现在宽度）的距离
rotate(angle)
顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
实现过程
function CanvasImg(data) {
this._getCanvas();
this.image = new Image();
this.image.src = data;
//如果你不加croossOrigin这个头，在canvas.toDataURL('image/jpg')时会报这个canvas被污染的错误
//如果你这张图片被页面缓存过了，即使你加了crossOrigin的请求头也会报错
this.image.setAttribute("crossOrigin", 'Anonymous')
this.image.onload = ()=> {
document.body.appendChild(this.image)
};
this.image.onerror = function () {
console.log('Error: image error!');
};
}
CanvasImg.prototype = {
goRotate: function (direction) {
this._rotate(direction);
this.image.src = this.canvas.toDataURL('image/jpg');
},
_rotate: function (dir) {
var width = this.image.width;
var height = this.image.height;
var img=this.image;
var canvas = this.canvas;
var degree =(dir=='right'?1:3)* 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
if (dir == 'right') {
ctx.drawImage(img, 0, -height);
} else {
ctx.drawImage(img, -width, 0);
}
},
_getCanvas: function (width, height) {
this.canvas=document.createElement('canvas')
this.canvas.style.display="none";
document.body.appendChild(this.canvas)
}
}
let src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"
let canvasImg = new CanvasImg(src);
// $('#左转按钮').on('click', function () {//向左旋转
// canvasImg.goRotate()
// });
// $('#右转按钮').on('click', function () {//向右旋转
// canvasImg.goRotate('right')
// })
附录
CanvasRenderingContext2D.drawImage()
