데이터 URL에 캔버스가 제대로 작동하지 않습니다.

Question

저는 img 요소를 사용하고 데이터 URL을 반환하는 함수가 있습니다. 이것은 7/10 시간처럼 작동하고 공백 이미지를 3/10 회 반환합니다. 내 브라우저 (크롬)를 통해 만들어진 데이터 URL을보고 동일한 이미지를 사용하므로이 함수가 깨진 이미지를 반환한다는 것을 알고 있습니다. 누구나 그 이유를 알아낼 수 있습니까?

이 예제는 대부분 작동하지만 이미지 대신 큰 흰색 직사각형으로 끝나는 경우가 있습니다.

Answer 1

기능을 사용하여을 그리기 전에 이미지가로드 될 때까지 기다려야합니다. 브라우저로 이미지를로드 한 후에 만 ​​imgToDataURL 기능을 호출 할 수 있습니다. 이 같은

뭔가 : 보안상의 이유로, 캔버스 소스 이미지를 제공하는 것 페이지와 같은 도메인에서 호스팅해야한다는

var image_sources = ["img1.png", "img2.png", "..."]; 

for(var i=0; i<image_sources.length; i++) { 
    var new_img = document.createElement("img"); 
    new_img.onload = function() { 
     imgToDataURL(this); 
    }; 
    new_img.src = image_sources[i]; 
}