跨域图片资源权限 (CORS enabled image)

发表于 更新于 分类于
本文字数： 372 阅读时长 ≈ 1 分钟

canvas 操作 img 报这个错：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

具体原因请参考：《CORS_enabled_image》。这里只讲讲解决方法

第一步：在 NGINX 中设置图片允许跨域

1
Access-Control-Allow-Origin: *

第二步：img 加上属性 crossorigin="anonymous"

1
<img src="http://example.com/xxx.jpg" crossorigin="anonymous">