Использование 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); 
    } 
}) 

Идея заключается в том, чтобы иметь возможность изменять изображения на своем пути обратно в браузер, масштабировать их на лету (если что-то не слишком медленно). Поэтому я пытаюсь прочитать изображение из db и масштабировать его с помощью 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(); 

должен возвращать [];

Третий SECURITY

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

Несмотря на то, Метеор очень хорошо на поддержание среды клиента и сервера в синхронизации, что Безразлично 't означает, что он может делать все на клиенте, что он может делать на сервере, и наоборот. Преобразование изображений с помощью ImageMagick было бы одним из примеров того, что вы можете сделать только на сервере.

Если бы я был построен что-то вроде этого, я бы изучил использование CollectionFS для синхронизации файлов. У них также есть a section in the README, который описывает, как манипулировать изображениями, прежде чем сохранять их, что похоже на то, что вам нужно.