JavaScript裁剪图片空白区域时报跨域污染画布错误如何解决？

这个报错是浏览器的同源安全策略导致的：加载了跨域来源的图片之后，画布会被标记为「污染」状态，禁止调用getImageData、toDataURL这类读取像素内容的接口。

加了crossOrigin = 'Anonymous'仍失效的常见原因 #

• 设置时机错误：必须在给图片的src属性赋值之前设置crossOrigin，先赋值src再配置跨域属性不会生效
• 图片服务未配置CORS响应头：即使前端配置了跨域属性，如果图片所在的服务没有返回Access-Control-Allow-Origin相关响应头，跨域请求依然会被拦截
• 缓存冲突：之前未带跨域属性请求过该图片，浏览器缓存了旧的无CORS头的响应，后续请求复用缓存导致校验失败
• 本地调试用了file协议：直接打开本地HTML文件使用file://协议访问时，即使配置了跨域属性也会触发同源限制

修复步骤 #

1. 调整图片加载逻辑，保证跨域属性设置在src赋值之前，且等图片加载完成后再调用裁剪函数，示例代码：

const img = new Image()
// 先设置跨域属性
img.crossOrigin = 'Anonymous'
// 再赋值src，可加时间戳避免缓存问题
img.src = '你的图片地址?t=' + Date.now()
img.onload = function() {
  const croppedUrl = removeImageBlanks(img)
  // 后续处理裁剪后的图片
}

2. 确认图片服务的CORS配置：如果是自有服务，需要配置允许跨域访问；如果是第三方图床，确认该图床支持跨域匿名访问
3. 本地调试必须用HTTP服务启动，比如VSCode的Live Server插件、本地nginx、node服务等，不要直接打开本地HTML文件
4. 可选兼容方案：如果无法调整图片服务配置，可以先将图片通过后端代理转成base64格式后再传给裁剪函数，完全规避跨域问题

原裁剪函数的优化点 #

原函数中imgWidth、imgHeight未加变量声明，会隐式成为全局变量，建议加上let声明避免变量污染：

let imgWidth = imageObject.width;
let imgHeight = imageObject.height;

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