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包。将canvas元素转换为数据URI，并在initiate the upload时将其作为insert方法的第一个参数传递。

$('#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这个新创建的图像对应（这当然是使用Meteor-CollectionFS，如上面Firdaus的回答所指出的）：

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

将流星图像数据保存到服务器集合

2 个答案: