在 Chrome 中是否有使用 toDataURL 的替代方法？

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

出于非常好的安全原因，浏览器不允许程序员导出跨域内容。您的私人银行信息是跨域内容，您不希望将这些内容提供给使用 canvas 作为导出设备的小偷。

因此，在您将跨域图像绘制到 canvas 后，context.toDataURL 会立即被禁用。 context.getImageData 的禁用也是如此。（context.getImageData 是导出 canvas 内容的另一种方式）。

要允许将 canvas 内容导出给您的用户，您必须将所有图像托管在与您的网页相同的域中。

顺便说一句，您必须在绘制所有元素之前给它们加载时间。这是一个图像加载器，它预先加载所有图像，然后在所有图像完全加载后调用 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[]

}

在 Chrome 中是否有使用 toDataURL 的替代方法？

Are there any alternatives for using toDataURL in Chrome?

javascript

google-chrome

canvas

web

todataurl