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

Question

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

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

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

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

    }

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

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

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

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 创建文件以进行上传，因为文件对象中没有地方可以添加实际数据。

总结起来我可以：

1. 生成图像 blob 并将其显示在 dom 元素中
2. 使用流星弹弓从驱动器上传文件
3. 检查现有文件对象

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

我不想下载图片，（有答案），我想上传它。有一个“仅限 chrome”way to do this with the filesystem API 但我需要跨浏览器（最终跨平台）的东西。如果有人能帮我解决这个问题，我会有无法抑制的快乐。

Answer 1

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

因此，当您有一个名为canvTex 的画布对象和一个名为uploader 的Slingshot.Upload 实例时，上传画布图像就像这样简单：

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

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