JS实现图片旋转，前端实现图片旋转

最新推荐文章于 2024-09-18 14:53:58 发布

慕云枫

最新推荐文章于 2024-09-18 14:53:58 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端 javascript 图片旋转

本文链接：https://blog.csdn.net/weixin_43992507/article/details/132560731

版权

前端专栏收录该内容

94 篇文章 2 订阅

订阅专栏

文章介绍了如何使用JavaScript和HTML中的CanvasAPI实现图片的旋转功能，同时处理了跨域问题。通过`rotateImg`函数，用户可以点击按钮动态改变图片角度，并在`clickSubmit`时将处理后的base64图像发送到后台。

摘要由CSDN通过智能技术生成

非服务打开会有跨越问题

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片旋转</title>
	</head>

	<body>
		<button onclick="clickRotateImg()">旋转</button>
		<button onclick="clickSubmit()">提交</button>
		<img src="" id="img-box" crossorigin="anonymous"/>
	</body>
	<script>
		var temp_rotate = 0, temp_base64;
		
		/**
		 * 旋转图片
		 * @param src 图片路径
		 * @param rotate 旋转角度
		 * @returns {Promise<base64>}
		 */
		function rotateImg(src, rotate, callback) {
			var img = new Image();
			img.src = src;
			img.crossOrigin= 'anonymous';
			img.onload = function() {
				var canvas = document.createElement('canvas')
				var context = canvas.getContext('2d')
				if(rotate > 45 && rotate <= 135) { // 90 宽高颠倒
					canvas.width = img.height
					canvas.height = img.width
				} else if(rotate > 225 && rotate <= 315) { // 270 宽高颠倒
					canvas.width = img.height
					canvas.height = img.width
				} else {
					canvas.width = img.width
					canvas.height = img.height
				}
				context.clearRect(0, 0, canvas.width, canvas.height)
				context.translate(canvas.width / 2, canvas.height / 2)
				context.rotate(rotate * Math.PI / 180)
				context.translate(-canvas.width / 2, -canvas.height / 2)
				context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height)
				context.translate(canvas.width / 2, canvas.height / 2)
				context.rotate(-rotate * Math.PI / 180)
				context.translate(-canvas.width / 2, -canvas.height / 2)
				context.restore()
				var base64 = canvas.toDataURL('image/png')
				callback(base64);
				temp_base64 = base64.replace('data:image/png;base64,', '');
			}
		}
		
		rotateImg("image/1.jpeg", temp_rotate, function(base64){
			document.getElementById('img-box').src = base64;
		});
		/**
		 * 点击-旋转图片
		 */
		function clickRotateImg(){
			if(temp_rotate >= 360){
				temp_rotate = 0;
			}
			temp_rotate = temp_rotate + 90;
			rotateImg("image/1.jpeg", temp_rotate, function(base64){
				document.getElementById('img-box').src = base64;
			});
		}
		
		/**
		 * 提交数据
		 */
		function clickSubmit(){
			console.log('后台base64转图片：', temp_base64);
		}
		
	</script>

</html>