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

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">