Есть ли альтернативы для использования toDataURL в Chrome?

Question

Основная проблема заключается в том, что мне приходится работать со многими изображениями. И я не могу использовать атрибут crossOrigin для всех из них.

My code looks like this: 
<script> 
var c=document.getElementById('example'); 
var ctx=c.getContext('2d'); 
var LeftHand = new Image(); 
LeftHand.id="imq1"; 
var RightHand = new Image(); 
RightHand.id="imq2"; 
var Body = new Image(); 
Body.id="imq6"; 

boyBody.src = "https://getout-s3.s3.amazonaws.com/baseBody/boy-02.png"; 
LeftHand.src = "https://getout-s3.s3.amazonaws.com/NK4XtQvkZ4MGctZf_.hand(unisex)_13.png "; 
RightHand.src = "https://getout-s3.s3.amazonaws.com/OPdFPcU2sORgNmTy_.hand(unisex)_9.png "; 
Body.src = "https://getout-s3.s3.amazonaws.com/HRZqrTYSdJXGedgX_.Body_(m)7.png "; 

boyBody.onload = function() { 
ctx.drawImage(boyBody, 0, 0, boyBody.width/2, boyBody.height/2); 
ctx.drawImage(LeftHand, (899 - LeftHand.width/2)/2, (867 - LeftHand.height/2)/2, LeftHand.width/2, LeftHand.height/2); 
ctx.drawImage(Underwear, (599 - Underwear.width/2)/2, (845 - Underwear.height/2)/2, Underwear.width/2, Underwear.height/2); 
ctx.drawImage(Body, (599 - Body.width/2)/2, (557 - Body.height/2)/2, Body.width/2, Body.height/2); 
var img = c.toDataURL("image/png"); 
document.write('<img src="' + img + '" />'); 
}; 
</script> 

Answer 1

Браузеры не позволяют программистам экспортировать междоменное содержимое по очень хорошим соображениям безопасности. Ваша частная банковская информация - это междоменный контент, который вы не хотите давать ворам с использованием холста в качестве экспортирующего устройства.

Следовательно, context.toDataURL отключается сразу же после рисования изображения на холсте. То же самое можно отключить для context.getImageData. (context.getImageData - это еще один способ экспорта содержимого холста).

Чтобы разрешить экспорт содержимого холста вашим пользователям, вам необходимо разместить все изображения в том же домене, что и ваша веб-страница.

BTW, вы должны предоставить все свои элементы времени для загрузки, прежде чем рисовать их. Вот загрузчик изображений, который загружает все ваши изображения заранее, а затем вызывает start(), когда все изображения полностью загружены. Поместите свой ctx.drawImage в start().

// put the paths to your images in imageURLs[] 
var imageURLs=[]; 
imageURLs.push("https://getout-s3.s3.amazonaws.com/baseBody/boy-02.png"); 
imageURLs.push("https://getout-s3.s3.amazonaws.com/NK4XtQvkZ4MGctZf_.hand(unisex)_13.png"); 
// ...etc, for all images 

// the loaded images will be placed in imgs[] 
var imgs=[]; 

var imagesOK=0; 
loadAllImages(start); 

function loadAllImages(callback){ 
    for (var i=0; i<imageURLs.length; i++) { 
     var img = new Image(); 
     imgs.push(img); 
     img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length) { 
       callback(); 
      } 
     }; 
     img.onerror=function(){alert("image load failed");} 
     img.crossOrigin="anonymous"; 
     img.src = imageURLs[i]; 
    }  
} 

function start(){ 

    // the imgs[] array now holds fully loaded images 
    // the imgs[] are in the same order as imageURLs[] 

}