캔버스에 외부 링크 이미지를 그릴 때 도메인 간 문제가 발생합니다.
예는 다음과 같습니다:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png'); ;이미지.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';이 페이지를 브라우저에서 열면 다음과 같은 문제를 발견할 수 있습니다.
포착되지 않은 DOMException: 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다. 오염된 캔버스를 내보낼 수 없습니다.
이는 CORS 정책에 의해 제한되며, 이미지를 사용할 수 있지만 캔버스에 그림을 그리면 캔버스가 오염되면 캔버스의 데이터를 추출할 수 없습니다. 캔버스 toBlob()을 사용할 수 없습니다. toDataURL() 또는 getImageData() 메소드를 사용하면 위의 보안 오류가 발생합니다.
이는 골치 아픈 문제이지만 다행히 img는 이미지 획득 프로세스 중에 CORS 기능이 활성화되는지 여부를 결정하는 crossorigin 속성을 추가했습니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image'). = canvas.toDataURL('이미지/png') }; 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';위의 두 JS 코드를 비교하면 다음과 같은 추가 줄을 찾을 수 있습니다.
image.setAttribute('crossorigin', 'anonymous');정말 간단하고 완벽한 솔루션입니다!
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.