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

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 imageNew，我会得到我可爱的 base 64 编码图像：

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

如果我 console.log 通过文件选择器从驱动器添加一个文件对象（ 不是从 canvas 生成的），我可以看到文件对象是什么应该看起来像：

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转换为命名文件，所以我可以将它传递给上传者。

我不想下载图片，（有答案），我想上传。有一个 "chrome only" way to do this with the filesystem API 但我需要一些跨浏览器（并最终跨平台）的东西。如果有人能帮我解决这个问题，我会很高兴的。

Answer 1

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

因此，当您有一个名为 canvTex 的 canvas 对象和一个名为 uploader 的 Slingshot.Upload 实例时，上传 canvas 图像就像:

canvTex.toBlob(function (blob) {
  uploader.send(blob, function (error, downloadUrl) {
    //...
  });
});

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

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

Can I convert browser generated image blob to image file for upload?

amazon-web-services

canvas

meteor

meteor-slingshot