畫布選項卡麻煩顯示圖像

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

這是一個替代版本。

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方法。這不是必需的。我轉告你如何解析圖片網址的textarea。我添加了一些鏈接，因爲您的方法似乎構建爲將每個圖像轉儲到一個畫布上。這不會很有用。我將getImageData調用移入了一個方法，因此它可以重用。