Meteor 中的独特画布答案

【问题标题】：Unique canvases in MeteorMeteor 中的独特画布
【发布时间】：2015-08-05 19:16:45
【问题描述】：

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

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

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

我可以成功地创建具有唯一时间戳的画布（从集合项中提取）。我的照片收藏中的一个项目看起来像

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

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

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;

};

所有值都会产生正确的信息，这些信息应该会导致绘制正确的图像。不幸的是，尽管第一个画布中的路径是正确的，但第二个（只有两个，但是第一个渲染的）项目的图像在两个画布上绘制。如果我手动向照片插入一个新项目，画布将绘制正确的图像。但是，刷新后它会恢复到错误的首次加载图像。

我的 data-time 属性是不必要的，但它允许我区分元素以进行调试。

【问题讨论】：

标签： javascript html canvas meteor

【解决方案1】：

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

var img = new Image();

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

【讨论】：

因此需要吊装！