4

在我正在编写的一个应用程序中，有一个页面，我从我的数据库中加载了多个 base64 编码的图像，并将它们放在一个 JavaScript 数组中。这是通过 EJS 模板在服务器上发生的，因此当用户收到 HTML 页面时，会出现 base64 编码的图像（我检查了这个）。

下一步是在客户端使用 JavaScript 循环遍历画布，然后用相应的图像数据填充每个画布。但是，我得到了一些奇怪的行为。每次只填充最后一个画布。

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();

    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    }
    image.src = images[(i - 1)];
}

图像数组在此代码的正上方定义（在同一范围内）。如果我像这样执行代码，则只会填充最后一个画布（id 为“canvas-12”）。如果我将 for 循环结束条件降低到例如 i < 11，则只会填充 id 为“canvas-10”的画布。

有什么我想念的吗？

4

1 回答 1

12

似乎是一个关闭问题；每次循环时，您都在更改函数ctx中包含的对象onload。您需要确保在循环期间不使用闭包更新对象：

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();
    (function(ctx, image) {
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        }
        image.src = images[(i - 1)];
    })(ctx, image);
}

注意：我没有对此进行测试。

于 2012-12-18T21:34:38.113 回答