캔버스에 그림을 그릴 때 발생하는 도메인 간 문제를 해결하는 방법
- 不言원래의
- 2018-06-14 11:25:333920검색
이 글은 주로 캔버스 드로잉 시 발생하는 크로스 도메인 문제를 자세히 설명하는 관련 정보를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.
캔버스에 외부 링크 이미지를 그릴 때 도메인 간 문제가 발생합니다.
예는 다음과 같습니다:
<!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" alt="">
<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');
};
image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
브라우저에서 이 페이지를 열면 다음 문제를 발견하게 됩니다:
Uncaught DOMException: Failed to running 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may 내보낼 수 없습니다.
이것은 CORS 정책에 의해 제한되며 도메인 간 문제가 있습니다. 이미지를 사용할 수 있지만 캔버스에 그리면 캔버스가 오염되면 캔버스의 데이터가 오염됩니다. 예를 들어 Canvas toBlob(), toDataURL() 또는 getImageData() 메서드를 사용하면 위의 보안 오류가 발생합니다.
이것은 괴로운 문제이지만 다행히도 img crossorigin 속성을 추가했습니다. 이 속성은 이미지 획득 프로세스 중에 CORS 기능을 활성화할지 여부를 결정합니다.
<!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" alt="">
<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').src = canvas.toDataURL('image/png');
};
image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
위의 두 JS 코드 조각을 비교하면 다음 추가 줄을 찾을 수 있습니다.
image.setAttribute('crossorigin', 'anonymous');
이렇게 간단하고 완벽한 솔루션이군요!
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 캔버스에 그림을 그릴 때 발생하는 도메인 간 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!