画布到数据网址无法正常工作

我有一个函数，它需要一个img元素并返回一个数据url。这工作像7/10次，并返回一个空白图像3/10次。我通过浏览器（chrome）查看创建的数据url并使用相同的图像，所以我知道这个函数返回的是破碎的图像。任何人都可以发现原因画布到数据网址无法正常工作

function imgToDataURL(img) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.naturalWidth; 
    canvas.height = img.naturalHeight; 
    var c = canvas.getContext('2d'); 
    c.drawImage(img, 0, 0); 
    dataurl = canvas.toDataURL(); 
    return dataurl; 
} 

$(function() { 
    img = new Image(); 
    img.crossOrigin = ''; 
    img.onload = function() { 
     newimg = new Image(); 
     newimg.onload = function() { 
      document.body.appendChild(newimg); 
     } 
     newimg.src = imgToDataURL(img); 
    } 
    img.src = 'https://somedomain.s3.amazonaws.com/someimg.png'; 
});

这个例子大部分时间都在工作，但有时候会以一个大的白色矩形而不是图像结束。

来源

2013-09-16 user2073343

注意，出于安全考虑，帆布源图像必须在同一个域做为所服务在页面主办。因此，如果您的img.src是其他域，并且您将其他域的图像写入canvas，那么canvas.toDataURL将失败。 – markE

我已经设置好了，所以我可以使用CORS从有问题的域读取图像。 – user2073343

只是好奇......你为什么要通过画布运行IMG？难道你不能只用.src创建一个html img元素='https：//somedomain.s3.amazonaws.com/someimg.png' – markE

你必须等待图像加载之前加载使用.drawImage函数。只有在浏览器加载图像后，才能调用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]; 
}

来源

2013-09-16 14:14:42 letiagoalves

我希望这是问题，但我已经这样做了。imgToDataURL总是调用加载的图像。 – user2073343

@ user2073343你可以让一个jsfiddle展示问题吗？在这种情况下，您发布的代码 – letiagoalves

@ user2073343没有任何问题，您是否可以提供您的问题的实际工作示例？以上显然是不完整的，因为我们没有看到何时/如何调用imgToDataUrl。 – Matt

画布到数据网址无法正常工作

回答

相关问题