2016-04-14 50 views
-1

イメージファイルをmongoDBに書き込んでhtmlページ要素に読み込む必要があります。 私はこのポストを見つけましたMeteor: uploading file from client to Mongo collection vs file system vs GridFSメテオでMongoDBに画像を書き込む/読み込む。

そして、最初の方法でdatabseにファイルを書き込もうとします:DDPによって、ファイルをmongoコレクションに保存してください。

データベースをRoboMongoで開き、自分の画像をバイナリタイプのフィールドとして検索します。

私は別の問題を抱えています。私は方法を見つけることができません。私はデータベースから画像を読み取り、それをバイナリオブジェクトから画像に変換し、流星アプリの画像として使用できます。

メテオでこの操作を行う方法を教えてください。ここで

ここDB

var image_buffer; 

Template.group_add_modal.events({ 

    'click #create-group':function(event, template){ 

     console.log('create group clicked'); 

     var group_name = template.find('#new-group-name').value, 
      group_desc = template.find('#new-group-desc').value, 
      reader = new FileReader(), 
      group = {}; 


     group = { 
      created_by:Meteor.userId(), 
      created_at: new Date(), 
      name:group_name, 
      description:group_desc, 
      image:image_buffer, 
      participants:[ 
       Meteor.userId() 
      ] 
     }; 
     console.log(image_buffer); 
     addGroupDocument(group); 
     Modal.hide(); 


     function addGroupDocument(document){ 
      groups.insert(document); 
     } 
    }, 

    'change #new-group-image' : function(event,template){ 
     var file = event.target.files[0]; 

     console.log('change new group image event'); 
     if (!file) return; 

     var reader = new FileReader(); 

     reader.onload = function(event){ 
      image_buffer = new Uint8Array(reader.result); 
      console.log('image buffered'); 
     } 

     reader.readAsArrayBuffer(file); 
    } 

}); 

答えて

0

に画像を書き込むに私のコードで私の質問の回答です:

template.find('#group-image').src = 'data:image/png;base64,'+encode(image_buffer); 

    function encode (input) { 
     console.log(input); 
     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
     var output = ""; 
     var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
     var i = 0; 

     while (i < input.length) { 
      chr1 = input[i++]; 
      chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index 
      chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here 

      enc1 = chr1 >> 2; 
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
      enc4 = chr3 & 63; 

      if (isNaN(chr2)) { 
       enc3 = enc4 = 64; 
      } else if (isNaN(chr3)) { 
       enc4 = 64; 
      } 
      output += keyStr.charAt(enc1) + keyStr.charAt(enc2) + 
       keyStr.charAt(enc3) + keyStr.charAt(enc4); 
     } 
     return output; 
    }