Canvas 크로스 도메인 문제를 해결하는 방법은 무엇입니까? 여기에서는 Canvas를 사용하여 그리는 동안 발생하는 도메인 간 문제와 해결 방법을 기록합니다.
먼저 구현 방법을 살펴보겠습니다.
구현 방법대상 그림은 일반적으로 그림 + 텍스트로 구성됩니다. 다양한 크기의 그림이든 예측할 수 없는 텍스트이든 캔버스 API drawImage 및 fillText 메서드를 사용하여 수행할 수 있습니다.
기본 프로세스는 다음과 같습니다.
1. 캔버스 컨텍스트 가져오기--ctx
const 캔버스 = document.querySelector(선택기)const ctx = canvas.getContext('2d')2. 그리기
이미지의 내용을 무시하고 drawImage를 직접 사용하여 캔버스에 그립니다.
const image = new Image()image.src = srcimage.onload = () => { ctx.save() // 여기서는 다음 매개변수를 사용하여 this.ctx.drawImage(image, dx, dy, dWidth, dHeight를 호출합니다. ) 이 .ctx.restore()}drawImage에는 매개변수를 사용하는 3가지 방법이 있습니다. 구체적인 사용법은 MDN 문서를 확인하세요.
3. 이미지 데이터 획득
HTMLCanvasElement DOM 객체에서 제공하는 toBlob(), toDataURL() 또는 getImageData() 메서드를 호출하기만 하면 됩니다.
canvas.toBlob(blob => { // 원하는 blob}, mimeType, EncoderOptions)여기서 mimeType의 기본값은 image/png입니다. EncoderOptions는 이미지 품질을 지정하고 압축에 사용할 수 있지만 mimeType 형식은 image/jpeg 또는 image/webp여야 합니다.
캔버스 크로스 도메인일반적인 상황에서 그려진 이미지를 출력해야 하는 경우 캔버스의 toBlob(), toDataURL() 또는 getImageData() 메서드를 호출하여 이미지 데이터를 얻을 수 있습니다. 하지만 크로스도메인 이미지를 접하면 좀 당황스럽습니다. 다음과 같은 오류가 보고될 수 있습니다.
'HTMLCanvasElement'에서 'toBlob' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.
또는
원본 'https://your.website'의 'https://your.image.src' 이미지에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. .
먼저 두 번째 상황을 살펴보겠습니다.
액세스 제어-허용-원본
도메인 전체에서 특정 이미지 리소스를 사용하고 서비스가 Access-Control-Allow-Origin 헤더에 올바르게 응답하지 않는 경우 다음 오류 메시지가 보고됩니다.
원본 'https://your.website'의 'https://your.image.src' 이미지에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. .
이는 도메인 간 액세스가 허용되지 않음을 의미합니다. 그러면 백그라운드에서 Access-Control-Allow-Origin 값을 * 또는 your.website로 수정하도록 하거나 대신 동일한 도메인 리소스를 사용할 수 있습니다(생각해 보세요). .
다음으로 첫 번째 상황을 해결해 보겠습니다.
img.crossOrigin = '익명'
원격 웹사이트 정보(GPS 및 기타 정보 등)를 무단으로 가져와서 발생하는 사용자 개인정보 유출을 방지하기 위해 toBlob(), toDataURL() 또는 getImageData() 호출 시 보안 오류가 발생합니다. 캔버스:
'HTMLCanvasElement'에서 'toBlob' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다.
이미지 서비스가 교차 출처 사용을 허용하는 경우(그렇지 않은 경우 이전 기사 참조) img 요소에 crossOrigin 속성을 추가하는 것을 고려해야 합니다. 즉, 다음과 같습니다.
const image = new Image()image.crossOrigin = 'Anonymous'image.src = src
이런 식으로 이미지 데이터를 얻을 수 있습니다. 못찾으시면 같은 도메인의 리소스를 이용해보세요~
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.