0

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

我不想下载图像，（有答案），我想上传它。使用文件系统 API有一种“仅限 chrome”的方法，但我需要一些跨浏览器（并最终跨平台）的东西。如果有人能帮我解决这个问题，我会有无法抑制的快乐。

4

1 回答 1

1

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

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

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

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

于 2015-08-15T08:55:28.037 回答