流星將圖像數據保存到服務器集合

Question

我試圖將用戶瀏覽器的屏幕截圖保存爲圖像集合（不需要）必須先將屏幕截圖圖像保存到用戶機器（客戶端），但我找不到任何關於我如何在Meteor中這樣做的資源/信息，所以想知道是否有人可以請求幫助/指導我如何將保存在下面顯示的表單隱藏字段中的圖像數據直接保存到服務器集合中？由於

TestPage.js

$('#target').html2canvas({ 
    onrendered: function (canvas) { 
     $('#img_val').val(canvas.toDataURL("image/png")); 
     document.getElementById("myForm").submit(); 
    } 
}); 

TestPage.html

<div id="target"> 
     <!-- HTML Content here --> 
</div> 
<form method="POST" enctype="multipart/form-data" id="myForm"> 
    <input type="hidden" name="img_val" id="img_val" value="" /> 
</form> 

Answer 1

嘗試使用Meteor-CollectionFS包。將畫布元素轉換爲數據URI並在initiate the upload時將其作爲插入方法的第一個參數傳遞。

$('#target').html2canvas({ 
    onrendered: function (canvas) { 
     var dataURI = canvas.toDataURL(); 
     Screenshot.insert(dataURI, function (err, fileObj) { 
      // Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP 
     }); 
    } 
}); 

Answer 2

而不是直接插入dataURL的，首先要創建一個FS.File，在那裏你可以爲它設置的名稱。在這種情況下，對於名字我使用的是_id從這個新創建的圖像對應於（這是用流星CollectionFS當然由菲爾道斯在回答中指出以上）另外一個文件：

let dataURL = canvas.toDataURL(); 
let assetId = options.assetId; 

var newFile = new FS.File(dataURL); 
newFile.name(assetId+'.png'); 

YourFSCollection.insert(newFile, function (err, fileObj) { 
    if (err) { 
    //handle error 
    console.log(err.message); 
    } else { 
    //get your new _id 
    console.log(fileObj._id);   
    } 
});