canvas 实现图片旋转

最新推荐文章于 2024-03-05 16:45:11 发布

yangqii

最新推荐文章于 2024-03-05 16:45:11 发布

阅读量675

点赞数 4

文章标签：前端 javascript

本文链接：https://blog.csdn.net/yangqii/article/details/135145293

版权

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 即旋转后的图片地址