Javascript 受污染的HTML画布，即使带有CORS标题

我正在尝试获取图像的数据URL。该图像来自一个跨源远程服务器Wikipedia。我使用此JavaScript尝试这样做：

# get the image
const img = document.createElement('img')
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png'
# don't send credentials with this request
img.crossOrigin = 'anonymous'
# now copy to a <canvas /> to get data URL
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx  = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
canvas.toDataURL('image/jpg')

那么这为什么不起作用呢？我的画布不受污染还需要其他东西吗？

在图像上设置src时，浏览器会请求图像。但此时，您还没有设置img.crossOrigin。将img.crossOrigin线移到img.src线上方

这修复了污染画布的问题，但您仍然无法获取URL。对映像的请求是异步的。您试图使用尚未加载的图像绘制到画布。将代码的其余部分移动到映像上的加载处理程序中，并将img.src行放在末尾，以启动整个过程：

const img=document.createElement'img'； img.crossOrigin='匿名'； img.addEventListener'load'，=>{ const canvas=document.createElement'canvas'； canvas.width=img.width； canvas.height=img.height； const ctx=canvas.getContext'2d'； ctx.drawImageimg，0,0； console.logcanvas.toDataURL'image/jpg'； }; img.src=https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png'; 在图像上设置src时，浏览器会请求图像。但此时，您还没有设置img.crossOrigin。将img.crossOrigin线移到img.src线上方

这修复了污染画布的问题，但您仍然无法获取URL。对映像的请求是异步的。您试图使用尚未加载的图像绘制到画布。将代码的其余部分移动到映像上的加载处理程序中，并将img.src行放在末尾，以启动整个过程：

const img=document.createElement'img'； img.crossOrigin='匿名'； img.addEventListener'load'，=>{ const canvas=document.createElement'canvas'； canvas.width=img.width； canvas.height=img.height； const ctx=canvas.getContext'2d'； ctx.drawImageimg，0,0； console.logcanvas.toDataURL'image/jpg'； }; img.src=https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png';

$ http 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png'

HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Age, Date, Content-Length, Content-Range, X-Content-Duration, X-Cache, X-Varnish
Age: 6359
Connection: keep-alive
Content-Disposition: inline;filename*=UTF-8''Strychnine.svg.png
Content-Length: 11596
Content-Type: image/png
Date: Fri, 29 Dec 2017 21:00:31 GMT
Etag: 223fb180fc10db8693431b6ca88dd943
Last-Modified: Sun, 04 Sep 2016 09:13:24 GMT
Strict-Transport-Security: max-age=106384710; includeSubDomains; preload
Timing-Allow-Origin: *
Via: 1.1 varnish-v4, 1.1 varnish-v4, 1.1 varnish-v4, 1.1 varnish-v4
X-Analytics: https=1;nocookies=1
X-Cache: cp1049 hit/4, cp2022 pass, cp4026 hit/4, cp4024 hit/3
X-Cache-Status: hit-front
X-Client-IP: 2606:6000:670c:f800:989:be22:e59d:3c3f
X-Object-Meta-Sha1Base36: 1xx5tvhafvp54zfrfx5uem0vazzuo1a
X-Timestamp: 1472980403.52438
X-Trans-Id: tx154e595e211c449d95b3d-005a469417
X-Varnish: 474505758 476375076, 160459070, 709465351 725460511, 931215054 920521958