Question

我正在使用fabric.js在Threes.js中动态创建纹理，我需要将纹理保存到AWS。我正在使用meteor-slingshot，它通常通过文件选择器输入传入图像。这是上传者：

var uploader = new Slingshot.Upload("myFileUploads");

uploader.send(document.getElementById('input').files[0], function (error, downloadUrl) {
  if (error) {
    console.error('Error uploading', uploader.xhr.response);
    alert (error);
  }
  else {
    Meteor.users.update(Meteor.userId(), {$push: {"profile.files":downloadUrl}});
  }
});

从驱动器上传工作正常... 但我在浏览器中生成我的文件，而不是从驱动器中获取它们。相反，它们是使用以下方法从canvas元素生成的：

    generateTex: function(){
        var canvTex         = document.getElementById('texture-generator');
        var canvImg         = canvTex.toDataURL('image/jpeg');
        var imageNew        = document.createElement( 'img' );
        imageNew.src        = canvImg;

    }

这也很好用。如果我console.log图像新，我用base 64编码得到我可爱的图像：

 <img src="data:image/jpeg;base64,/9j/
4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgID 
//....carries on to 15k or so characters

如果我console.log通过filepicker从驱动器添加了一个文件对象（不是从画布生成），我可以看到文件对象应该的样子像：

file{
  lastModified: 1384216556000
  lastModifiedDate: Mon Nov 11 2013 16:35:56 GMT-0800 (PST)
  name: "filename.png"
  size: 3034
  type: "image/png"
  webkitRelativePath: ""
  __proto__: File
}

但我无法从blob创建文件以进行上传，因为文件对象中没有地方可以添加实际数据。

总结一下，我可以：

生成图像blob并将其显示在dom元素中
使用meteor-slingshot从驱动器上传文件
检查现有文件对象

但我不知道如何将blob转换为命名文件，因此我可以将其传递给上传者。

我不想下载图片，（有答案），我想上传它。有一个“仅镀铬”way to do this with the filesystem API但我需要一些跨浏览器（最终跨平台）。如果有人可以帮助我，我会有无法控制的快乐。

Answer 1

Slingshot支持blob和文件一样：https://github.com/CulturalMe/meteor-slingshot/issues/22

因此，如果您有一个名为canvTex的画布对象和一个名为Slingshot.Upload的{{1}}实例，那么上传画布图像就像以下一样简单：

uploader

因为blob没有名称，所以在定义指令时必须考虑到这一点。不要尝试根据文件名生成密钥。

我可以将浏览器生成的图像blob转换为图像文件以进行上传吗？

1 个答案: