canvas重新绘制图片并实现旋转
// 旋转次数
this.rotateCount++
if(this.rotateCount === 4) {
this.rotateCount = 0
}
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let img = new Image()
img.src = this.defaultSrc // defaultSrc 需要旋转的图片地址
img.onload = () => {
let imgW = img.width
let imgH = img.height
// rotateCount 旋转次数
switch(this.rotateCount) {
case 1: // 旋转90°
canvas.width = imgH
canvas.height = imgW
ctx.rotate(Math.PI / 2)
ctx.drawImage(img, 0, -imgH, imgW, imgH)
break
case 2: // 旋转180°
canvas.width = imgW
canvas.height = imgH
ctx.rotate(Math.PI)
ctx.drawImage(img, -imgW, -imgH, imgW, imgH)
break
case 3: // 旋转270°
canvas.width = imgH
canvas.height = imgW
ctx.rotate(3 * Math.PI / 2)
ctx.drawImage(img, -imgW, 0, imgW, imgH)
break
case 0: // 旋转360°
canvas.width = imgW
canvas.height = imgH
ctx.drawImage(img, 0, 0, imgW, imgH)
break
}
let rotateSrc = canvas.toDataURL('image/jpeg', 1) // rotateSrc 即旋转后的图片地址