우리는 원래 URL 내가 <a href="https://jsfiddle.net/AndrewGong/mkx7f8un/11/" rel="nofollow noreferrer">here</a>에 코드를

Question

캔버스에 이미지를 그리기 '데이터 URL을'의 선택해야하는 하나

나는 웹 이미지의 URL을 사용할 때 내가 언젠가 찾을

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 
ctx.fillRect(50,50,50,50); 
src="https://www.pixelstalk.net/wp-content/uploads/2016/07/3D-High-Resolution-Images-620x349.jpg" 

var image = new Image(); 
image.crossOrigin = "anonymous"; 
image.onload = function(){ 
    var imgWidth=image.width; 
    var imgHeight=image.height; 

    ctx.drawImage(image,0,0,imgWidth,imgHeight); 
} 
image.src = src 

, 그것은 공장. 그러나 때로는 웹 이미지의 '데이터 URL'을 사용해야합니다. 그렇다면 우리는 어느 것을 선택해야합니까? 원래 URL 또는 데이터 URL?

누구든지 조언을 해줄 수 있습니까?

Answer 1

외부 서버에서 이미지를 검색하기 때문입니다. 자신과 같은 서버에서 이미지를 변환하거나 이미지를 base64로 변환하십시오. 당신은 이미지가

예를 base6로 변환하기 위해 인터넷 여러 사이트에서 찾을 수 있습니다 : src="data:image/jpeg;base64,/9j/4QAYRXhpZg.......DEFF";

Answer 2

그것은 사진 크기 의존하지 않습니다 - 그것은 크로스 도메인 요청 브라우저의 제한 사항입니다. 응답에서 특별한 HTTP 헤더 (Access-Control-Allow-Origin)없이 다른 도메인의 HTTP 리소스를 검색 할 수 없습니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 3

다른 사람이 지적한대로 CORS 권한에 있습니다. 기본적으로 브라우저는 외부 서버에 호스팅 된 이미지의 내용을로드 할 수 없도록합니다 (명시 적 CORS 권한이없는 경우). CrossOrigin을 익명으로 설정하면 대부분 해결되지만 대부분의 경우에는 해결되지 않습니다.

이 문제를 해결할 수있는 유일한 방법은 이미지에 대한 cURL 요청을 서버에 다운로드하여 사용하는 것입니다.

일반적으로 cURL 요청을하고 서버의 실제 이미지를 유지하지 않으려는 경우 toDataURL()을 사용하여 캔버스에서 이미지를 내보낼 때 DataURL (base64 인코딩 이미지) 만 필요합니다. 응답을 base64로 인코딩하여 캔버스에 base64 DataURL로로드 할 수 있습니다.