1

这似乎是一个长期存在的问题，我认为很多人都想一劳永逸地彻底解决这个问题。

问题存在于链条中

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

然后暂停等待 image.complete 类似...

while(HHGimg.height == 0)

或者

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

其次是 canvas to 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 完成其工作并将有效对象传递到画布。

需要一种方法来确保暂停足以完成，而不会以停止脚本的循环结束（这个“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>

...但在暂停以确保图像完全加载之前，一些返回只是“数据：”

现在交给你了。关于如何击败这个的任何想法？

4

2 回答 2

1

试试图像加载器 - 这是一个很棒的教程。

这是给出的代码：

  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  window.onload = function(images) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var sources = {
      darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
      yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
    };

    loadImages(sources, function(images) {
      context.drawImage(images.darthVader, 100, 30, 200, 137);
      context.drawImage(images.yoda, 350, 55, 93, 104);
    });
  };
于 2012-08-26T21:11:17.993 回答
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
});

我添加了一个演示。请注意，由于相同的来源策略，我在那里为图像使用 base64 URL。托管在同一服务器和端口上的图像应该适合您。

于 2012-08-26T07:32:59.310 回答