CollectionFS图像未完全加载

Question

我刚刚遇到了一个werid问题，似乎我的图像有时只是轻微加载。有时当我手动刷新页面时，它们会完全加载，但很多时候会发生这种情况-- http://i.gyazo.com/a7050e430c79aa31ba557fc8271f1502.png

不确定为什么会发生这种情况，我使用带有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");
        }
    },
});

Answer 1

我看到了一个与您描述的问题类似的问题。当我上传一张图片并立即显示时，最初只显示了其中的一部分。我将深入研究我发现的内容，希望它能有所帮助。

我发现只有在CollectionFS中使用自定义的transformWrite: function时才会发生这种情况。我认为发生的情况是，在GraphicsMagick完成整个文件的写入之前，有一个竞态条件导致image.isUploaded()和image.hasStored()函数返回true。然后，web服务器请求并缓存部分处理的图像。就像你说的，有时当你刷新的时候，图像会被完全加载。

举个例子：

显示部分处理图像的头像URL：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;
    }
});