javascript - 如何向html5 Canvas 添加无限数量的图像？

Question

我想让用户将任意数量的图像拖放到 html5 Canvas 上。从在线教程中我收集到的内容如下:

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),

    imgs = arr.map(function callback(currentValue, index, array) {
        img = img = document.createElement("img");
    }[, thisArg])
    mouseDown = false,
    brushColor = "rgb(0, 0, 0)",
    hasText = true,
    clearCanvas = function () {
        if (hasText) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            hasText = false;
        }
    };

for (var i=0;i<imgs.length;i++){
    imgs[i].addEventListener("load",function(){
        context.drawImage(img,0,0);
    })
}

我知道第 4 行是完全错误的...，但通常人们似乎将图像创建为变量，然后使用拖动的图像更改源。由于我想要用户希望添加的图像数量，那么这将是一个没有任何大小的数组？

此外，由于此代码在页面加载时被调用一次，因此以后无法追加此数组(例如当用户决定添加另一个图像时)。那么在这种情况下，也许整个范式都是不正确的？

有人可以建议我如何解决这个问题吗？谢谢!

编辑:

建议的解决方案:

imgs_arr = [];
var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    imgs = imgs_arr.map(function callback(src) {
        var img = document.createElement("img");
        img.src = src;
        return img;
    });
    mouseDown = false,
    brushColor = "rgb(0, 0, 0)",
    hasText = true,
    clearCanvas = function () {
        if (hasText) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            hasText = false;
        }
    };

// Adding instructions
context.fillText("Drop an image onto the canvas", 240, 200);
context.fillText("Click a spot to set as brush color", 240, 220);

function drawImage(element,index,array){
    element.addEventListener("load",function(){
        clearCanvas()
        context.drawImage(element,0,0)
    })
}
imgs_arr.forEach(drawImage);

当前抛出:无法读取 null(匿名函数)的属性“appendChild”，因为我的 imgs_arr 为空 - 尚未有人添加图像。

Answer 1

假设您的arr是图像 URL 的数组，您的 map 应如下所示:

imgs = arr.map(function callback(src) {
  var img = document.createElement("img");
  img.src = src;
  return img;
});

我重命名为currentValue至src为了弄清楚它是什么，我删除了额外的参数，但这在技术上都是可选的。

重要的部分是:

• 创建一个新的img元素并将其分配给变量。
• 将 URL 分配给 src那个`img.
• 返回图像。

map()函数收集从回调返回的所有值并将它们转换为数组。这会给你一个数组 Image对象(这是 HTML <img> 元素的 JS 形式)。

其余部分看起来或多或少是正确的(尽管你确实应该使用 ; 而不是 , 来结束你的行以避免可能出现的奇怪的事情)。

此外，要在初始化后添加更多内容，您只需 push()一个新的Image到数组上，然后重新绘制它。