Question

我是jquery的新手，我有一个关于使用画布显示图像的小项目。一切都会很好，但我在尝试显示所有图像时遇到麻烦，我尝试使用.each（函数）或循环但不工作

这是我的麻烦，任何人都可以帮忙吗？感谢

<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调用移动到一个方法中，以便它可以重用。

画布选项卡故障显示图像

1 个答案: