Canvas 크로스 도메인 솔루션 소개

이 글은 Canvas 크로스 도메인 솔루션에 대한 소개입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Canvas 도메인 간 문제를 해결하는 방법은 무엇입니까? 여기에서는 Canvas를 사용하여 그리는 동안 발생하는 도메인 간 문제와 해결 방법을 기록합니다.

먼저 구현 방법을 살펴보겠습니다.

구현 방법

대상 이미지는 일반적으로 이미지 + 텍스트로 구성됩니다. 다양한 크기의 그림이든 예측할 수 없는 텍스트이든 캔버스 API drawImage 및 fillText 메서드를 사용하여 수행할 수 있습니다.

기본 프로세스는 다음과 같습니다.

캔버스 컨텍스트 가져오기--ctx

const canvas = document.querySelector(selector)
const ctx = canvas.getContext('2d')

드로잉

#🎜🎜 #그림 무시 캔버스에 있는 내용은 drawImage를 사용하여 직접 캔버스에 그릴 수 있습니다.

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 这里我们采用以下参数调用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage에는 매개변수를 사용하는 3가지 방법이 있습니다. 구체적인 사용법은 MDN 문서를 확인하세요.

이미지 데이터 가져오기

HTMLCanvasElement DOM 개체에서 제공하는 toBlob(), toDataURL() 또는 getImageData() 메서드를 호출합니다.

canvas.toBlob(blob => {
    // 你要的 blob
}, mimeType, encoderOptions)

여기서 mimeType의 기본값은 image/png입니다. EncoderOptions는 이미지 품질을 지정하고 압축에 사용할 수 있지만 mimeType 형식은 image/jpeg 또는 image/webp여야 합니다.

Canvas 크로스 도메인

일반적인 상황에서 그려진 이미지를 출력해야 하는 경우 toBlob(), toDataURL() 또는 getImageData() 메서드를 호출할 수 있습니다. 캔버스 이미지 데이터를 얻습니다. 하지만 크로스도메인 이미지를 접하면 좀 당황스럽습니다. 다음 오류가 보고될 수 있습니다.

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

또는

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

두 번째 상황을 먼저 살펴보겠습니다.

Access-Control-Allow-Origin

도메인 전체에서 특정 이미지 리소스를 사용하고 서비스가 Access-Control-Allow-Origin 헤더 정보에 올바르게 응답하지 않는 경우 다음과 같습니다. 보고된 오류 메시지:

Access to image at 'https://your.image.src' from origin 'https://your.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

은 도메인 간 액세스가 허용되지 않음을 나타냅니다. 그러면 백그라운드에서 Access-Control-Allow-Origin 값을 * 또는 your.website로 수정하도록 할 수 있습니다. 또는 대신 동일한 도메인 리소스를 사용하십시오(고려하시겠습니까?).

다음으로 첫 번째 상황을 해결해보겠습니다.

img.crossOrigin = 'Anonymous'

원격의 웹사이트 정보를 무단으로 가져와서 발생하는 사용자 개인정보 유출을 방지하기 위해(GPS 및 기타 정보 등 자세한 내용은 Exif로 검색하시면 됩니다), 캔버스 toBlob(), toDataURL() 또는 getImageData()를 호출하면 보안 오류가 발생합니다.

Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.

이미지 서비스가 도메인 간 사용을 허용하는 경우(그렇지 않은 경우 이전 문서 참조) 고려해야 할 사항 다음으로 img 요소에 crossOrigin 속성을 추가합니다. 즉,

const image = new Image()
image.crossOrigin = 'Anonymous'
image.src = src

이렇게 하면 이미지 데이터를 얻을 수 있습니다. 못찾으시면 같은 도메인의 리소스를 바꿔보세요~

위 내용은 Canvas 크로스 도메인 솔루션 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!