キャンバスタブのトラブル表示画像

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

これは別のバージョンです。

http://jsfiddle.net/linkabi9/jy54Q/

HTML：

<textarea id="textid"> blah blah blah </textarea> 
<a id="prev" href="#previous">Previous</a> 
<a id="next" href="#next">Next</a> 

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

JAVASCRIPT：

$(function() { 
    var $textarea = $("#textid"), 
     $canvas = $("#ca1"); 
    var ctx = $canvas[0].getContext("2d"); 
    var textareahtml = $textarea.val(); 
    var imgsrcarray = []; 
    $(textareahtml).find("img").each(function(i, o) { 
     imgsrcarray.push(this.src); 
    }); 
    var counter = 0; 
    $("#prev").click(function() { 
     if (counter != 0) { 
      loadImg(--counter); 
     } else { 
      alert("Beginning"); 
     } 
     return false; 
    }); 
    $("#next").click(function() { 
     if (counter != imgsrcarray.length - 1) { 
      loadImg(++counter); 
     } else { 
      alert("End"); 
     } 
     return false; 
    }); 
    var loadImg = function(i) { 
     $.getImageData({ 
      url: imgsrcarray[i], 
      success: function(img) { 
       $canvas.attr("width", img.width).attr("height", img.height); 
       ctx.drawImage(img, 0, 0, img.width, img.height); 
      }, 
      error: function(xhr, text_status) {} 
     }); 
    }; 
    loadImg(counter); 
    return; 
}); 

私は、ネストされたready方法を取りました。それは必要はありません。イメージURLのテキストエリアを解析する方法を変更しました。私はあなたのメソッドが1つのキャンバスにすべてのイメージをダンプするように構築されているように見えるので、いくつかのリンクを追加しました。それはあまり役に立たないでしょう。 getImageData呼び出しをメソッドに移動して再利用できるようにしました。