JS利用Canvas，跨浏览器实现图片旋转

在JavaScript（JS）中，利用HTML5的Canvas API可以实现跨浏览器的图片旋转功能。Canvas是HTML5的一个重要组成部分，它允许动态渲染图形，并提供了丰富的绘图方法，包括处理图像。以下将详细介绍如何通过Canvas来实现图片的90、180、270度旋转。 1. **引入图片到Canvas** 我们需要获取图片元素，通常是通过`<img>`标签，然后将其加载到Canvas上下文。这可以通过`HTMLImageElement`对象的`drawImage()`方法实现。例如： ```javascript var img = new Image(); img.src = '图片URL'; img.onload = function() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); }; ``` 2. **设置旋转中心点** 在旋转图片前，我们需要设定旋转中心，通常选择图片的中心点。可以使用`translate()`方法改变坐标轴原点，使其位于图片中心： ```javascript ctx.translate(canvas.width / 2, canvas.height / 2); ``` 3. **执行旋转** 使用`rotate()`方法实现旋转，参数为旋转角度（以弧度为单位）。90度旋转对应π/2弧度，180度对应π弧度，270度对应3π/2弧度。注意，Canvas旋转是以顺时针为正方向，因此负值表示逆时针旋转： ```javascript ctx.rotate(angleInRadians); ``` 4. **重新定位图片** 由于图片已围绕中心点旋转，我们需要调整图片的位置，以便其左上角再次与Canvas的左上角对齐。这里用到`scale()`方法缩放坐标轴，以及`translate()`返回原始中心点位置： ```javascript ctx.scale(-1, -1); // 反转X和Y轴，使图片位置正确 ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵 ``` 5. **保存结果** 如果希望保留旋转后的图片，可以使用`toDataURL()`方法将Canvas内容转换为一个data URL，然后可以将其插入一个新的`<img>`元素，或者发送到服务器。 综合以上步骤，我们可以编写一个函数，根据传入的角度值实现图片旋转： ```javascript function rotateImage(angle) { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); ctx.scale(-1, -1); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.setTransform(1, 0, 0, 1, 0, 0); }; } // 使用 rotateImage(90); // 旋转90度 ``` 这个示例展示了如何使用JavaScript和Canvas API在浏览器中实现图片的90、180、270度旋转。这个过程涉及到图片的加载、Canvas绘图、坐标变换等多个方面，是Web开发中的基础技能之一。在实际应用中，可能需要考虑更多细节，如浏览器兼容性、图片尺寸适应、动画效果等。在压缩包文件"rotatepicture"中，可能包含了实现这一功能的示例代码或测试用例，供进一步学习和参考。