Показать изображение с проблемой тега холста

Question

Я новичок в jquery, у меня небольшой проект по отображению изображения с canvas. Все будет хорошо, но у меня возникают проблемы при попытке отобразить все изображения, я пытаюсь использовать .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);

Если я изменяю код в две строки, я могу показать все изображения, но я могу управлять ими, загрузить форму с 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 в настоящее время не работает).