顯示圖像與畫布標籤麻煩

Question

我是新的jquery，我有一個關於與畫布顯示圖像的小項目。一切都會好的，但我有麻煩時，試圖顯示所有圖像，我嘗試使用。每個（功能）或循環，但不能工作

這是我的麻煩，任何一個能幫助？由於

http://jsfiddle.net/NcKfr/6/

<textarea id="textid">blah blah blah</textarea> 



<canvas id="ca1" width="640" height="480"></canvas> 

<script> 
$(document.body).find('*').each(function() { 
    var tmp = $("textarea").children().remove(); 
    var text = $("textarea").text(); 
    text = text.replace(/<li>/g, "").replace(/<\/li>/g, "").replace(/<br \/>/g, "").replace(/\/>/g, "").replace(/<img/g, "").replace(/ /g, ""); 
    $("textarea").text(text); 
    $("textarea").append(tmp); 
    }); 
</script> 


Script code : 

$(function(e) { 


var data = $("#textid").val(); 
    rows = data.split('src="'); 
    partNum = []; 
    var i; 
    var len = rows.length; 
var can = document.getElementsByTagName('canvas')[0]; 
var ctx = can.getContext('2d'); 

    $(document).ready(function() { 

    for (i = 1; i < len; i++) { 
partNum[i] = rows[i].substr(0,rows[i].indexOf('"')); 
$.getImageData({ 
      url: partNum[i], 
      success: function(image) { 

       // Set the canvas width and heigh to the same as the image 
       $(can).attr('width', image.width); 
       $(can).attr('height', image.height); 
       $(can).css({ 
        'background-color': 'none', 
        'border-color': '#fff' 
       }); 

       // Draw the image on to the canvas 
       ctx.drawImage(image, 0, 0, image.width, image.height); 

      }, 
      error: function(xhr, text_status) { 
       // Handle your error here 
      } 
     }); 

    } 


    }); 


}); 


      success: function(image) { 

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

如果我在兩個線路更改代碼，我可以顯示所有圖像，但我可以控制它加載表格1至13任何機構可以幫我解決...謝謝

Answer 1

這裏是一個將在一個畫布繪製圖像一個在另一個代碼。

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

您還可以檢查此：http://jsfiddle.net/HcxG3/6/（貌似背後getImageData服務是目前下跌）。