2015-05-24 76 views
1

我试图将用户浏览器的屏幕截图保存为图像集合(不需要)必须先将屏幕截图图像保存到用户机器(客户端),但我找不到任何关于我如何在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> 

回答

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 
     }); 
    } 
}); 
+0

感谢很多,这是 – MChan

+0

谢谢,但如何保存一个名字? – Dayd

0

而不是直接插入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);   
    } 
});