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

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 现在，看看完整的 repo here

首先安装所有 FSCollecton 包。

GridFS (Because you say you want to store the file inside 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');
}

Ok, at this point we have the GridFS and GM, to verify both

server console.
=> GraphicsMagick found

Client console.

kaiStackExample.find().fetch();

应该return[];

第三安全

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代码

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 for syncing files. They also have a section in the README，它描述了如何在保存图像之前处理图像，这似乎正是您所追求的。

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

Using Imagemagick with a file from a mongo collection

meteor

imagemagick

imagemagick-convert