CollectionFS圖像未完全加載

我剛剛遇到了一個問題，看來我的圖像有時只是稍微加載。有時當我手動刷新頁面時，它們會完全加載，但很多時候會發生這種情況 - http://i.gyazo.com/a7050e430c79aa31ba557fc8271f1502.png CollectionFS圖像未完全加載

不確定爲什麼會發生這種情況，我正在使用cfs-ejson-file和cfs-s3的collectionFS來存儲圖片。

這裏是一些示例代碼（主個人資料圖片）

模板代碼 -

<div class="profile-avatar" style="height: 261px; margin-bottom: 30px;"> 
    {{#if avatar }} 
     {{#if avatarReady }} 
     <img width="261px" height="261px" src="{{avatar.url}}" class="profile-avatar-img thumbnail" alt="Profile Image"> 
     {{else}} 
      <div class="activity-spinner"> 
       {{>spinner}} 
      </div> 
     {{/if}} 
     {{else}} 
     <img data-src="holder.js/100%x100%/text:No Profile Photo"> 
    {{/if}} 
</div> <!-- /.profile-avatar -->

JS代碼 -

Template.profileLeft.helpers({ 
    avatar: function(){ 
     if(this.profile && this.profile.images) 
      return Images.findOne(this.profile.images[0]._id); 
    }, 
    avatarReady: function(){ 
     if(this.profile && this.profile.images){ 
      var image = Images.findOne(this.profile.images[0]._id); 
      return image && image.isUploaded && image.hasStored("images"); 
     } 
    }, 
});

來源

2014-07-23 theo3335796

我看到了類似的問題，以你所描述的。當我上傳圖片並立即顯示時，最初只顯示一部分圖片。我會進入我發現的並希望它有所幫助。

我發現這只是當我在CollectionFS中使用自定義的transformWrite：函數時發生的。我相信發生的是在GraphicsMagick完成寫入整個文件之前，有一個競爭條件導致image.isUploaded（）和image.hasStored（）函數返回true。然後部分處理的圖像被Web服務器請求並緩存。就像你說的，有時當你刷新時，圖像將被完全加載。

舉個例子：

您的虛擬形象的網址，顯示了部分處理後的圖像： http://yourdomain.com/cfs/files/images/Bun5qheJDeaZDp5Mf/DSC_5498.JPG?&store=images

添加一個假的查詢參數，以獲得高速緩存左右，並且整個圖像應該顯示： http://yourdomain.com/cfs/files/images/Bun5qheJDeaZDp5Mf/DSC_5498.JPG?&store=images& bust = cache

我最終做的是在模型上設置一個額外的值，每當圖像完成處理時觸發。以下是處理圖像的gm函數的示例。一旦函數完成，另一個函數被稱爲「finishedProcessing」，用於設置模型上的值。

示例代碼：

gm(readStream, fileObj.name()) 
      .resize(1000).quality(75) 
      .stream(function(err, stdout, stderr) { 
       if (err) { 
        return err; 
       } 
       stdout.pipe(writeStream); 

       // Update value when processing is finished 
       stdout.on('end', function(){ 
        finishedProcessing(fileObj._id); 
       }); 
      });

然後，您可以顯示圖像搶前image.finishedProcessing的價值：

avatarReady: function(){ 
     if(this.profile && this.profile.images){ 
      var image = Images.findOne(this.profile.images[0]._id); 
      return image && image.isUploaded() && image.hasStored("images") && image.finishedProcessing; 
     } 
    }

這似乎工作得很好，我。即使您沒有使用GraphicsMagick，當文件正在處理或保存時，可能會出現類似的情況。

另外，在附註中，我相信你需要在輔助函數中調用「image.isUploaded（）」而不是「image.isUploaded」來獲得正確的返回值。

更新：在另一個方面說明，我發現重構後，如果您沒有將收藏集設置設置爲允許更新，則只會保存圖像的第一個塊，並且還會導致您遇到的問題看到。

Images.allow({ 
    update: function(userId, file, fields, modifier) { 

     // This is to check whether or not CollectionFS is trying 
     // to update the Image 
     var validCFSUpdate = _.intersection(fields, ['chunkSize', 'chunkCount', 'chunkSize']).length > 0 

     // Only allow logged in users and CollectionFS to update the Image 
     return userId && validCFSUpdate; 
    } 
});

來源

2014-09-12 04:56:12 rushtonmd

CollectionFS圖像未完全加載

回答

相關問題