도메인 간 이미지 리소스 권한(CORS 지원 이미지)

HTML 사양 문서에는 이미지에 대한 crossorigin 속성이 도입되었습니다. 적절한 헤더 정보 CORS를 설정하면 img 이미지를 현재 사이트(현재 원본)에서 직접 다운로드한 것처럼 다른 사이트에서 로드하고 캔버스에서 사용할 수 있습니다.

crossorigin 속성 사용에 대한 자세한 내용은 CORS 설정 속성을 참조하세요.

CORS 인증 없이 캔버스에서 이미지를 사용할 수는 있지만 그렇게 하면 캔버스가 오염될 수 있습니다. 캔버스가 오염되면 더 이상 캔버스에서 데이터를 추출할 수 없습니다. 즉, toBlob(), toDataURL() 및 getImageData()와 같은 메서드를 호출할 수 없으며, 그렇지 않으면 보안 오류가 발생합니다.

이는 실제로 사용자의 개인정보를 보호하고, 원격 웹사이트에서 사용자의 이미지 정보를 무단으로 로딩하여 개인정보 유출을 방지하기 위한 것입니다.

(역자 주: 사용자가 QQ 등 소셜 네트워킹 사이트에 로그인한 경우 보호 기능이 제공되지 않으면 해당 웹 사이트는 웹 사이트 오픈 후 캔버스를 사용하여 사용자의 이미지 정보를 획득하고 업로드하여 유출이 발생할 수 있습니다.)

먼저 이미지 서버는 해당 Access-Control-Allow-Origin 응답 헤더를 설정해야 합니다. img 요소의 crossOrigin 속성을 요청 헤더에 추가합니다. 예를 들어, Apache 서버는 HTML5 Boilerplate Apache 서버 구성의 구성 정보를 복사하여 다음과 같이 응답할 수 있습니다.

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origin : IS_CORS 헤더 세트 Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

이러한 설정이 적용된 후에는 이 사이트의 리소스와 마찬가지로 다른 사이트의 이미지를 DOM 저장소(또는 다른 장소)에 저장할 수 있습니다.

 var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // 특정 이미지 주소 img.crossOrigin = Anonymous;img. = function() { canvas.width = img.width; canvas.height = img.height(img, 0, 0 ); localStorage.setItem( saveImageData, canvas.toDataURL(image/png) );}img.src = src;// 다음과 같은 경우 캐시된 이미지도 로드 이벤트를 트리거하는지 확인하세요. ( img.complete || img.complete == = 정의되지 않음) { img.src = 데이터:이미지/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUw==; img.src = src;}

브라우저 호환성

데스크탑

이동하는

또한보십시오

Chrome: WebGL에서 교차 출처 이미지 사용

HTML 사양-crossorigin 속성

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.