image - 加载图像并等待 image.complete 后再处理数据

Question

这似乎是一个持续存在的问题，我认为很多人都想一劳永逸地弄清真相。

问题存在于链条

image = new Image();
image.src = imagePath;

然后暂停一下，等待 image.complete ，例如...

while(HHGimg.height == 0)

或

while(!image.complete)
{
     setTimeout(function(){ foo },100);
}

接下来是canvas转base64方法。

var canvas = document.createElement('canvas');                          
canvas.width = image.width;                                         
canvas.height = image.height;                                           
var canvasContext = canvas.getContext('2d');                            
canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);  
imageData = canvas.toDataURL('image/jpeg'); 

问题在于暂停以确保 image.complete 完成其工作并将有效对象传递到 Canvas 。

需要一种方法来确保暂停足以完成，而不会以停止脚本的循环结束(这个“while”方法似乎就是这样)

关于如何在继续之前等待有效图像的任何想法...

我的整个功能如下...

<script type="text/javascript">
    function imageFetch(imgpath, imgname)                                               
{
    imgdata = "";                                       
    image = new Image();                                                        
    image.src = imgpath + imgname;;                                             
    while(image.height == 0)
    {
            setTimeout(function(){imgdata = "";},100);                                                      
    }
    var canvas = document.createElement('canvas');                          
    canvas.width = image.width;                                         
    canvas.height = image.height;                                           
    var canvasContext = canvas.getContext('2d');                            
    canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);      
    imgdata = canvas.toDataURL('image/jpeg');                                                   
    return imgdata;                                                             
}
</script>

...但直到暂停以确保图像完全加载，一些返回只是“数据:”

现在交给你了。关于如何击败这个有什么想法吗？

Answer 1

只需使用 image.onload !您还需要认识到，只有来自同一域的图像才能转换为数据 URL。如果不是，您将遇到同源策略错误。此外，您的函数必须等待 image.onload 才能转换数据，因此您应该更改函数以接受回调。

您的代码应如下所示:

<script type="text/javascript">
    function imageFetch(imgpath, imgname, callback)                                               
    {
    var imgdata = "",                                       
    image = new Image();                                                        
    image.src = imgpath + imgname;
    var canvas = document.createElement('canvas');                                     
    var canvasContext = canvas.getContext('2d');                            
    image.onload = function (){                          
        canvas.width = image.width;                                         
        canvas.height = image.height;     
        canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);      
        imgdata = canvas.toDataURL('image/jpeg');
        callback(imgdata);
    }                          
    return;                                                          
}
</script>

然后像这样运行:

imageFetch("/", "random.jpg", function (imgData){
    console.log(imgData);
    // Do whatever you want with imgData here
});

我添加了 demo 。请注意，由于同源策略，我对图像使用了 base64 URL。托管在同一服务器和端口上的图像应该可以正常工作。