キャンバスタグで画像を表示するとエラーが発生する

Question

jqueryが新しく、キャンバスを使った表示画像に関する小さなプロジェクトがあります。すべてのイメージは表示されますが、すべてのイメージを表示しようとすると問題が発生します.each（関数）またはループを使用しようとしましたが動作しません。

これは私のトラブルです。おかげ

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

私は2つの行のコードを変更した場合、私はすべての画像を表示することができますが、私はすべてのボディは私が修正することができ、それが13にフォーム1をロード制御することができますそれは...ありがとう

Answer 1

ここでは、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背後のサービスは現在ダウンしているように見えますが）。