流星中的獨特畫布

我想通過集合循環並繪製特定圖像到集合中的每個項目的畫布。我很難讓它在每個畫布上繪製正確的圖像，而是在所有畫布上繪製相同的圖像。流星中的獨特畫布

<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; 

};

所有的值產生正確的信息，應該導致正確的圖像被繪製。不幸的是，儘管第一個畫面中的路徑是正確的，但第二個（僅兩個，但是是第一個渲染的）項目的圖像繪製在兩個畫布上。如果我手動爲照片插入新項目，畫布將繪製正確的圖像。但是，刷新後會恢復爲不正確的第一張加載的圖像。

我的數據時間屬性是不必要的，但它允許我區分出於調試目的的元素。

來源

2015-05-24 JacobPariseau

雖然我不是100％確定這是問題，但我懷疑這是與分配給img時丟失的var有關。如果是這種情況下面應該工作：

var img = new Image();

這可能會導致錯誤，因爲缺少var可以使JavaScript引擎解釋img爲每個格一樣，全局變量。由於代碼最有可能在任何回調激活之前運行，因此只有最後一個div分配給img的值在運行時纔會被讀取。這將導致所有回調將相同的圖像繪製到畫布上，即最後一個。

來源

2015-05-24 01:25:26 Snorre

因此需要提升！ –

流星中的獨特畫布

回答

相關問題