Javascript 显示带有画布标记的图像

我是jquery新手，我有一个关于用画布显示图像的小项目。一切都会很好，但我有一个问题，当我尝试显示所有的图像，我尝试使用。每个（函数）或循环，但不工作

这是我的麻烦，谁能帮我？。谢谢

---

若我在两行中更改代码，我可以显示所有图像，但我可以控制它从1加载到13。任何人都能帮我修好它。。。谢谢

这里有一个代码，可以在一张画布上一张接一张地绘制图像

var url = "http://farm4.static.flickr.com/",
    urls = [
      "3002/2758349058_ab6dc9cfdc_z.jpg",
      "2445/5852210343_d21767f18d.jpg"],
    can = $('#canvas').get(0),
    ctx = can.getContext('2d'),
    canH = 0,
    canW = 0,
    h = 0,
    images = [],
    size = urls.length;

// loop via all images
$.each(urls, function (index, img) {
  $.getImageData({
    url: url + img, 
    success: function (image) {
      images.push(image);
      canH += image.height;
      canW = Math.max(canW, image.width);   
      if (images.length === size) {   
        can.width = canW;
        can.height = canH;
        $.each(images, function (i, img) {
          ctx.drawImage(img, 0, h);
          h += img.height;
        });                
      }
    }
  });
});

---

您还可以检查：（看起来getImageData背后的服务当前已关闭）。

您是否使用了

$.getImageData（）的插件？

？是的，我使用了maxnovakovic的插件。你可以在这个链接中看到：你能帮我吗？我想显示所有的图像。当我使用document.createElement（'canvas'）时，一切都会正常，但图像不会以循环形式1到13显示。你能再帮我查一下吗。也许它不起作用？我有一个服务器可以使用它。->我工作的灵魂->这是你的。你能帮我查一下吗。非常感谢gain@MIF很抱歉，原始解决方案无法正常工作，因为每次画布大小更改时都必须重新绘制所有元素。我发布了这个问题的固定解决方案。你也可以在这里看到它是如何工作的：我注意到你的图片URL来自文本区域。这是你的要求吗？

 script = document.createElement('canvas');
var can = document.body.appendChild(script);

var url = "http://farm4.static.flickr.com/",
    urls = [
      "3002/2758349058_ab6dc9cfdc_z.jpg",
      "2445/5852210343_d21767f18d.jpg"],
    can = $('#canvas').get(0),
    ctx = can.getContext('2d'),
    canH = 0,
    canW = 0,
    h = 0,
    images = [],
    size = urls.length;

// loop via all images
$.each(urls, function (index, img) {
  $.getImageData({
    url: url + img, 
    success: function (image) {
      images.push(image);
      canH += image.height;
      canW = Math.max(canW, image.width);   
      if (images.length === size) {   
        can.width = canW;
        can.height = canH;
        $.each(images, function (i, img) {
          ctx.drawImage(img, 0, h);
          h += img.height;
        });                
      }
    }
  });
});