本地HTML文件中Canvas调用getImageData()跨域问题求解

直接通过file://协议打开本地HTML文件时，浏览器会将本地图片资源视为跨源内容，即便设置img.crossOrigin = "Anonymous"也无法绕过同源限制，这就是触发污染错误的核心原因。最简解决办法是用本地HTTP服务器托管文件，具体步骤：

• 打开终端/命令提示符，切换到你的HTML和图片所在的文件夹
• 根据Python版本执行启动命令：
  • Python 3环境：python -m http.server 8000
  • Python 2环境：python -m SimpleHTTPServer 8000
• 在浏览器中访问 http://localhost:8000/你的项目文件名.html

此时HTML和图片都处于同一HTTP源下，浏览器不会触发跨源限制，getImageData()就能正常调用了。这个方案无需额外配置，只要你的电脑装有Python就能快速实现，比HFS等工具更简单直接。

内容的提问来源于stack exchange，提问作者iPadDeveloper2011