Question

我正在为小型像素艺术文件构建一个简单的数据库。图像直接保存到数据库中：

Template.pixUpload.events({
    'change .myPixInput': function(event, template) {
        event.preventDefault();
        var file = event.target.files[0]; //assuming 1 file only
        if (!file) return;

        var reader = new FileReader();

        reader.onload = function(event){
            MyPix.insert({
                binary: reader.result,
                createdAt: new Date
            });
        }
        reader.readAsDataURL(file);
    }
})

这个想法是能够在返回浏览器的路上修改图像，动态扩展（如果事情不会太慢）。所以我试图从数据库中读取图像，并在显示之前使用Imagemagick进行缩放。它不起作用 - 我找不到任何有用的东西我能理解：

Template.pixList.helpers({
    'thumbnail': function() {
        var bin = this.binary;
        var thumb = new FileReader();
        Imagemagick.convert(['bin', '-filter', 'point', '64x64', 'thumb']);
        return thumb;
    }
})

Answer 1

即时使用GM Package现在，请查看完整的回购here

首先安装所有FSCollecton软件包。

GridFS（因为您说要将文件存储在MongodB中）。

Graphicsmagick meteor add cvs:graphicsmagick

在/lib/collection.js

上宣布第二个集合

  kaiStackExample = new FS.Collection("kaiStackExample ", {
  stores: [new FS.Store.GridFS("kaiStackExample ",{
    beforeWrite:function(fileObj){
      return {
            extension: 'png',
            type: 'image/png'
          };
    },
    transformWrite:function(fileObj, readStream, writeStream){
      // Here you can choose, for example 10x10 (thumbnail), etc.
         gm(readStream).resize(600).stream('PNG').pipe(writeStream);
    }
  })]
});

和我们的基本订阅，在同一个/lib/collection.js

if(Meteor.isClient) {
    Meteor.subscribe('kaiStackExample');
}

好的，此时我们有GridFS和GM，以验证两者

server console.
=> GraphicsMagick found

Client console.

kaiStackExample.find().fetch();

应该返回[];

第三次安全

kaiStackExample.allow({
insert:function(userId,doc){
//here we can do stuff like, only permit user with accounts insert on the collection
if(!Meteor.userId()){
   return false;
    }else{
   return true
   },
update:function(userId,doc){
   if(userId === doc.authorId{
         return true;
    }else{
        return false; // if user don't own the document can update it.
    }
  }
});

四个模板和事件

HTML标记

<template name="exampleKai">
Select File
<input type="file" id="fileExampleKai">
<button type="submit" id="buttonExampleKai">Click to upload</button>
</template>

Js Code

Template.exampleKai.events({
  'click #buttonExampleKai':function(event,template){
    event.preventDefault();
    var file = $('#fileExampleKai').get(0).files[0];
        fsFile = new FS.File(file);
    fsFile.metadata = {
        coolMetadata:"Yes You can add some metadata too"
     }
     if(file === undefined){
       alert("Please upload a file to continue")
     }else{
       kaiStackExample.insert(fsFile,function(err,succes){
          if(err){
             console.log(err.reason);
           }else{
             console.log("ok we insert yeaaa")
            }
        });
      }
  }
});

就像我说这对我有用，我认为这是你编辑的最佳选择size,type,etc看看希望它可以帮到你

Answer 2

尽管Meteor非常擅长保持客户端和服务器环境同步，但这并不意味着它可以在客户端上执行它可以在服务器上执行的所有操作，反之亦然。使用ImageMagick转换图像将是仅在服务器上执行的操作的一个示例。

如果我要构建这样的东西，我会考虑使用CollectionFS来同步文件。他们还有a section in the README描述了如何在保存之前操纵图像，这似乎正是你所追求的。

将Imagemagick与mongo集合中的文件一起使用

2 个答案: