Javascript 如何从Blob创建文件对象？

DataTransferItemList.add

允许您覆盖javascript中的复制操作。但是，它只接受

文件

对象

复制事件 my

copy

事件中的代码：

var items = (event.clipboardData || event.originalEvent.clipboardData);
var files = items.items || items.files;

if(files) {
  var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
  files.add(blob);
}

chrome中的错误：

未捕获类型错误：未能在

DataTransferItemList

上执行

add

：参数1的类型不是

文件

尝试

新文件（Blob Blob，DOMString name）

在Google Chrome中，我尝试了这个：

这里的问题是，Google Chrome不太遵守规范

未捕获类型错误：无法构造

文件

：非法构造函数

Firefox在这种情况下也不会：

方法参数丢失或无效

正在尝试

新文件（[Mixed blobParts]、DOMString名称、BlobPropertyBag选项）

---

@apsillers建议的解决方案也不起作用。这是在和中使用的非标准方法（但无用）

二进制数据 我试图避免blob，但文件构造函数还是失败了：

  //Canvas to binary
  var data = atob(   //atob (array to binary) converts base64 string to binary string
    _this.editor.selection.getSelectedImage()  //Canvas
    .toDataURL("image/png")                    //Base64 URI
    .split(',')[1]                             //Base64 code
  );
  var file = new File([data], "image.png", {type:"image/png"}); //ERROR

您可以在控制台中尝试：

Chrome=38：
Firefox：

斑点 传递

Blob

可能是正确的，并且可以在Firefox中使用：

var file = new File([new Blob()], "image.png", {type:"image/png"});

Firefox:

Chrome=38：

• Q:那么如何从

  Blob

  生成

  文件

注意：在@apsillers提醒我更新Google Chrome之后，我添加了更多截图。

文件构造函数（以及Blob构造函数）包含一系列部分。一个部分不必是一个字符串。它也可以是Blob、文件或类型化数组。您可以很容易地从Blob中构建文件，如下所示：

新文件（[blob]，“文件名”）

---

如果您不花时间了解规范流程或规范本身，请不要说浏览器没有实现规范，或者说规范是无用的。

这对我很有用，从画布到文件[或Blob]，还有文件名

var dataUrl = canvas.toDataURL('image/jpeg');
var bytes = dataUrl.split(',')[0].indexOf('base64') >= 0 ?
          atob(dataUrl.split(',')[1]) :
          (<any>window).unescape(dataUrl.split(',')[1]);
var mime = dataUrl.split(',')[0].split(':')[1].split(';')[0];
var max = bytes.length;
var ia = new Uint8Array(max);
for (var i = 0; i < max; i++) {
  ia[i] = bytes.charCodeAt(i);
}

var newImageFileFromCanvas = new File([ia], 'fileName.jpg', { type: mime });

---

这是我用来将blob转换成文件的完整语法，后来我不得不使用我的服务器将其保存到文件夹中

var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()})

---

看起来Chrome和FF都使用了非标准语法，类似于

Blob

构造函数：知道如何将Blob转换为有效的第一个参数吗？我猜，将Blob读入带a的字符串。@apsillers二进制数据不起作用。实际上什么都不管用。他们可能甚至没有实现它。使用您的

atob

方法，您看到了什么错误？我在Chrome中没有看到

c=document.createElement（“canvas”）的任何错误；新文件（[atob（c.toDataURL（“image/png”）.split（“，”[1]）]，“foo.png”，{type:“image/png”}）我也用非空白画布进行了测试。“这是使用的非标准方法（但无用）”--似乎暗示实现是无用的。您引用了文件API TR，但浏览器实现通常引用ED。您可以通过单击“最新编辑草稿”链接来访问它。我希望这会有所帮助。浏览器实现者总是使用ED。使用ED的缺点是一些/大多数浏览器可能落后。一般来说，使用TR是可以的。文件API TR非常旧（比ED落后1年），一般来说，它们的追赶速度要快得多。我认为，在大多数情况下，Chromium在其规范达到TR之前不会发布API。在这种情况下，Firefox确实需要Firefox OS的文件构造函数，所以他们发布了它。教育署文件的变化，他们要求（这是好的，顺便说一句）。自从Firefox发布以来，我认为也可以在Chromium中发布构造函数；DR认为标准化过程有点混乱，使用前沿功能意味着您必须进行大量的挖掘。对不起：（谢谢你的同情：）。你不会相信我在没有任何结果的情况下做了多少挖掘工作。我对其他语言已经习以为常，但对javascript来说这还是第一次。很抱歉，我之前批评了你！我在Chromium的bug追踪器上读了你的bug描述，有点生气。祝你的代码好运！
var blob = new Blob([ia], { type: mime });

var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()})