html <img src=...> 작동하지만 JS 이미지로드 원인 CORS 오류

Question

js + jquery에서 그림 편집기를 만들고 싶습니다. 첫 번째 단계에서 사용자에게 이미지 URL을 제공하도록 요청합니다. 하지만 문제를 가로 질러 와서 이미지 데이터를 JS (base64 이미지를 생성하기 위해 uri)에로드하려고합니다. 콘솔에서 오류가 발생합니다 : … has beeb blocked by CORS policy: Access-Control-Allow-Origin …. 하지만 왜 그런지 궁금합니다. html 파일의 경우 (이미지 핫 링크)

<img src="https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg" /> 

브라우저가 CORS 문제없이로드됩니다! 여기에 같은 이미지를 CORS 문제를 던져 내 JS 코드는 다음과 같습니다

function downloadFile(url) { 
    console.log({url});  
    var img = new Image(); 
    img.onload = function() { 
     console.log('ok'); 
     // never execute because cors error 
     // … make base64 uri with image data needed for further processing 
    }; 

    img.crossOrigin = "Anonymous"; 
    img.src = url; 
} 

그래서 질문입니다 - (HTML 태그로드 그것으로) 이미지를로드하고 CORS의 문제를 방지 base64로 URL로 변환하는 JS을 강제하는 방법 ?

https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg

Answer 1

내가 찾은 솔루션 내 자신 (JS ES6) 시도하지만-부분적으로 찾을 수 있습니다. CORS를 지원하지 않는 src에서 img를 캔버스로로드 할 수 있지만 브라우저 스위치 cavnas는 taint mode으로 전환되어 toDataURL (및 기타 콘텐츠 액세스)을 허용하지 않습니다.

이러한 장애물을 극복하는 유일한 방법은 CORS를 '켜기'로 할 프록시 서버를 만드는 것입니다. 주어진 URL에 대한 이미지를 다운로드하고 JS의 앱으로 다시 전송합니다. 나는 우리가 테스트에 개발에 사용할 수있는 무료 서버 https://cors-anywhere.herokuapp.com을 발견했다.

loadImgAsBase64(url, callback) 
{ 
    let canvas = document.createElement('CANVAS'); 
    let img = document.createElement('img'); 
    img.setAttribute('crossorigin', 'anonymous'); 
    img.src = 'https://cors-anywhere.herokuapp.com/'+url; 

    img.onload =() => 
    { 
     canvas.height = img.height; 
     canvas.width = img.width; 
     let context = canvas.getContext('2d'); 
     context.drawImage(img,0,0); 
     let dataURL = canvas.toDataURL('image/png'); 
     canvas = null; 
     callback(dataURL); 
    }; 
} 

그리고 우리는이 (ES6)로 호출 할 수 있습니다 :

let url='https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg'; 
this.loadImgAsBase64(url, (dataURL) => { console.log('imgData:',dataURL) }); 

그게 모두 :) (난 단지 크롬에 그것을 테스트 아래 이미지 URL에서 dataUri를 돌려 전체 기능 코드가있다)