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

这似乎是一个有点顽固的问题，我想很多人都想一劳永逸地弄清这个问题

这一问题存在于供应链中

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

然后暂停等待图像。完成类似于

while(HHGimg.height == 0)

或

然后是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>

函数imageFetch（imgpath，imgname）
{
imgdata=“”；
图像=新图像（）；
image.src=imgpath+imgname；；
while（image.height==0）
{
setTimeout（函数（）{imgdata=”“；}，100）；
}
var canvas=document.createElement（'canvas'）；
canvas.width=image.width；
canvas.height=image.height；
var canvasContext=canvas.getContext（'2d'）；
canvasContext.drawImage（图像，0，0，canvas.width，canvas.height）；
imgdata=canvas.toDataURL（'image/jpeg'）；
返回imgdata；
}

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

现在轮到你了。有没有办法打败这个

就用吧！您还需要认识到，只有来自同一域的图像才能转换为数据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。托管在同一服务器和端口上的图像应该可以正常工作。

尝试图像加载程序-这是一个很好的解决方案

以下是给出的代码：

  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);
    });
  };

---

不。我试过了。画布宽度和高度设置不正确。您仍然会得到一个空的base64输出。在设置画布元素之前，我需要检查图像是否已加载。否。image.onload不会启动。将FF14.01与Fbug和Safari 6.0一起使用。@TJS101正确，抱歉。我添加了一个演示，应该可以使用。检查控制台的输出。

  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);
    });
  };