이미지의 데이터 URL을 가져 오려고합니다. 이미지는 크로스 원본 원격 서버 인 Wikipedia에서 가져옵니다. 나는이 자바 스크립트를 수행하려고 할 때 사용 :CORS 헤더가있는 경우에도 오염 된 HTML 캔버스
# 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')
그러나 나는이 오류를 받고 있어요 : Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
합니다.
나는 이것이 CORS 문제라고 읽었습니다. 서버가 Access-Control-Allow-Origin
헤더를 설정하지 않은 경우 브라우저는 이미지에서 이미지 데이터를 가져올 수 없도록합니다. 그러나 이상한 것은입니다. 응답을 확인한 결과 은으로 설정되었습니다. 그래서 이것이 왜 작동하지 않는지 나는 이해하지 못한다. 다음은 터미널에서 요청할 때의 출력입니다 (헤더는 Chrome devtools에 표시된 것과 동일합니다).
$ 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
그렇다면 왜 이것이 작동하지 않습니까? 내 캔버스에 "오염 된"것이 아닐 정도로 이 아니면이 필요합니까?