本文会从实际开发场景出发，一步步带你实现完整功能：先讲怎么把本地图片加载到Canvas画布上，这里要注意跨域问题的处理——之前我踩过坑，直接用img.src加载本地图片会有权限报错，后来才发现需要通过FileReader API读取文件；接着重点拆解旋转功能的实现逻辑，包括怎么用translate方法把旋转中心点移到图片中心（MDN Web Docs中明确提到，Canvas的rotate方法默认以原点为中心旋转，这也是很多人旋转后图片“跑掉”的主要原因），以及如何通过角度计算实现0-360度任意旋转；最后教你用toDataURL把Canvas内容转成图片文件，再通过a标签的download属性实现一键下载。
文中每段代码都有详细注释，从HTML结构、CSS样式到JavaScript逻辑全流程覆盖，你可以直接复制到本地运行。不管你是刚接触Canvas的新手，还是想优化现有功能的开发者，跟着做就能避开“旋转后图片变形”“下载图片空白”这些常见坑。记得测试时用Chrome或Firefox浏览器，IE对Canvas的支持不太好——我之前帮客户调试时就遇到过，同样的代码在IE里下载按钮没反应，后来发现是toDataURL的兼容性问题。现在就打开编辑器，咱们边看边实操吧！
你在开发时有没有遇到过这种情况：明明图片路径写对了，Canvas却一直报跨域错误，甚至控制台跳出“Tainted canvases may not be exported”的提示？这其实是浏览器的同源策略在起作用——为了安全，浏览器禁止Canvas处理来自不同域名的图片，或者直接访问本地文件系统的图片。我之前帮朋友的图片编辑器调bug时，他就是直接用img.src = “local-image.jpg”加载本地图片，结果一运行就报错，后来才发现本地图片和网络图片的加载方式完全不同。
如果加载的是本地图片（比如用户通过input上传的图片），正确的做法是用FileReader API处理：先通过input[type=”file”]让用户选择图片，获取到file对象后，创建FileReader实例，调用readAsDataURL方法把文件转成base64格式，再赋值给img.src。这样绕开了直接访问本地文件系统的权限限制，Canvas就能正常读取了。而如果要加载网络图片，就得确保图片所在的服务器允许跨域访问——具体来说，服务器的响应头里要有Access-Control-Allow-Origin字段，同时在前端设置img.crossOrigin = “anonymous”。我之前对接一个第三方图片接口时，没设置crossOrigin，结果图片能显示但无法导出，后来加上这行代码才解决问题。记住，只要涉及Canvas导出图片（比如用toDataURL方法），跨域处理这一步绝对不能少，不然浏览器会认为这是不安全的操作，直接阻止导出。
为什么图片加载到Canvas时提示跨域错误？
这通常是因为直接通过img.src加载本地或跨域图片导致的权限问题。正确做法是使用FileReader API读取本地图片文件（通过input[type=”file”]获取文件对象后，用reader.readAsDataURL(file)处理）；若加载网络图片，需确保图片服务器允许跨域访问，并设置img.crossOrigin = “anonymous”，否则Canvas会因安全限制无法使用toDataURL导出图片。
旋转后图片出现偏移或被裁剪，如何解决？
Canvas的rotate方法默认以画布原点（左上角）为旋转中心，直接旋转会导致图片偏移。解决方法是先通过translate方法将原点移至图片中心（ctx.translate(canvas.width/2, canvas.height/2)），旋转后再将原点移回（ctx.translate(-canvas.width/2, -canvas.height/2)）。同时需确保Canvas画布尺寸与图片实际尺寸一致，避免因画布过小导致图片被裁剪。
点击下载按钮后，下载的图片是空白的，可能是什么原因？
常见原因有三种：一是图片未完全加载到Canvas就触发了下载，需在img.onload回调中执行绘制和下载逻辑；二是Canvas存在跨域污染（如加载了未设置crossOrigin的跨域图片），导致toDataURL方法失效；三是Canvas尺寸设置错误（如CSS尺寸与Canvas元素的width/height属性不一致），此时需确保Canvas的width和height属性与实际显示尺寸相同，避免绘制内容被拉伸或压缩。
Canvas处理大尺寸图片时卡顿，有什么优化
可从三方面优化：一是限制Canvas画布最大尺寸（如超过2000px时等比缩小图片），因为过大的Canvas渲染会占用大量内存；二是使用requestAnimationFrame代替setTimeout执行旋转动画，减少重绘频率；三是在旋转过程中暂时关闭不必要的样式（如阴影、滤镜），完成后再重新应用。 对于频繁旋转操作，可缓存旋转后的Canvas状态，避免重复计算和绘制。
哪些浏览器支持Canvas图片旋转与下载功能？
主流浏览器如Chrome 4+、Firefox 3.6+、Edge 12+、Safari 5+均支持Canvas的rotate、toDataURL方法及a标签download属性。 Internet Explorer 11及以下版本对Canvas的支持有限（如不支持toDataURL的某些图片格式，download属性无效）， 优先在现代浏览器中开发和测试，若需兼容旧浏览器，可考虑使用Flash或第三方图片处理库（但不推荐，现代前端开发中已逐步淘汰旧浏览器支持）。
