내 Canvas drawImage()가 비어 있거나 'A'로 채워져 있는 이유는 무엇이며, 외부 이미지를 그릴 때 CORS 문제를 어떻게 해결할 수 있습니까?

CanvasContext2D drawImage() 문제: 이미지 로드 및 CORS 구성

dataURL을 검색하기 전에 캔버스에 이미지를 그리는 경우 문제가 발생할 수 있습니다. 반환된 데이터가 수많은 "A" 문자를 포함하여 비어 있는 경우 발생합니다. 또한 문서에 캔버스를 추가하면 이미지가 그려지지 않을 수 있습니다.

해결 방법: 이미지 로드 이벤트

이 문제를 해결하려면 기다리는 것이 중요합니다. 캔버스에 페인팅을 시도하기 전에 이미지가 로드될 때까지. 의 로드 이벤트 핸들러를 활용하세요. 요소:

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  // ... code to draw the image and retrieve dataURL ...
};
img.src = "http://somerandomWebsite/picture.png";

픽셀 데이터 액세스를 위한 CORS 구성

또 다른 잠재적 원인은 캔버스의 "오염"이라고 알려진 제한입니다. 이를 극복하려면 올바른 CORS(Cross-Origin Resource Sharing) 구성이 필수적입니다.

• 동일 원본 이미지: 문제 없습니다.
• 외부 이미지: 서버가 헤더에서 교차 출처 액세스를 허용하는지 확인하고 img.crossOrigin을 다음으로 설정합니다. "use-credentials."
• 익명 요청: 서버가 익명 액세스를 허용하는 경우 img.crossOrigin을 "anonymous"로 설정합니다.

참고: CORS 헤더는 서버에서 제어됩니다. 교차 출처 속성은 단지 CORS를 사용하려는 욕구를 나타냅니다. 적절한 서버 구성을 우회할 수 없습니다.

Edge Case: Mixed Image Sources

이미지가 서버와 CORS 지원 서버 모두에서 소스되는 경우 onerror 이벤트 사용을 고려하세요. CORS가 아닌 이미지를 처리하는 핸들러입니다.

function corsError() {
  this.crossOrigin = '';
  this.src = '';
  this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);

위 내용은 내 Canvas drawImage()가 비어 있거나 'A'로 채워져 있는 이유는 무엇이며, 외부 이미지를 그릴 때 CORS 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!