javascript - Meteor 中独特的 Canvas

Question

我试图循环遍历一个集合，并为集合中的每个项目将特定图像绘制到 Canvas 上。我很难让它在每个 Canvas 上绘制正确的图像，而是在所有 Canvas 上绘制相同的图像。

<ul id="settings-photos">
    {{#each photos}}
        {{> photo}}
    {{/each}}
</ul>

<template name="photo">
    <li>
        <canvas data-time="{{timestamp}}"></canvas>
    </li>
</template>

我可以成功创建具有唯一时间戳的 Canvas (从集合项中提取)。我的照片集中的某个项目看起来像

_id: "PQWhyTQGwyBoZuxRs"
format: "jpg"
timestamp: "1431998534049"
user: "Sw6CdzqQzk49kkQ2M"

渲染模板时，我使用用户和时间戳值构建图像路径，将其加载到图像中，然后绘制到 Canvas 上。

Template.photo.rendered = function () {
    var canvas = this.find('canvas');
    console.log(canvas); // "<canvas data-time="1431998534049" height="375"></canvas>"
                         // Loads the correct unique data from each collection item

    var ctx = canvas.getContext('2d');

    var user = Meteor.userId(); // "Sw6CdzqQzk49kkQ2M"
    var time = this.data.timestamp; // "1431998534049"
    var path = user + "_" + time + ".jpg";

    console.log(path); // "Sw6CdzqQzk49kkQ2M_1431998534049.jpg"
                       // Again, correct path to the image referenced by the correct item

    img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0, 300,375);
    };
    img.src = path;

};

所有值都会产生正确的信息，从而绘制正确的图像。不幸的是，尽管第一个 Canvas 中的路径是正确的，但第二个(只有两个，但是第一个渲染的)项目的图像被绘制在两个 Canvas 上。如果我手动向照片插入新项目， Canvas 将绘制正确的图像。然而，刷新后，它会恢复到不正确的首次加载图像。

我的数据时间属性是不必要的，但它允许我区分元素以进行调试。

Answer 1

虽然我不能 100% 确定这就是问题所在，但我怀疑这与分配给 img 时缺少 var 有关。如果是这种情况，以下操作应该有效:

var img = new Image();

这可能会导致错误，因为缺少 var 可能会使 JavaScript 引擎将 img 解释为每个 div 的相同全局变量。由于代码很可能在任何回调激活之前为每个 div 运行，因此当它们运行时，只会读取最后一个 div 分配给 img 的值。这将导致所有回调将相同的图像绘制到 Canvas 上，即最后一个。