显示画布标记有问题的图像

Display image with canvas tag trouble

本文关键字：图像有问题布标记显示更新时间：2023-09-26

我是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。任何人都可以帮我修复它。。。感谢

这里有一个代码，它将在一个画布上一个接一个地绘制图像。

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背后的服务当前已关闭）。