如何从Blob创建File对象？

Question

DataTransferItemList.add允许您在javascript中覆盖复制操作。但是，它只接受File对象。

复制活动

我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中的错误：

  

未捕获的TypeError：无法在add上执行DataTransferItemList：参数1的类型不是File。

尝试new File(Blob blob, DOMString name)

在谷歌浏览器中，我尝试了这个，according to the current specification：

var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));  
var file = new File(blob, "image.png");

问题在于，Google Chrome不会严格遵守规范。

  

未捕获的TypeError：无法构造File：非法构造函数

在这种情况下，Firefox也不是：

  

方法参数缺失或无效。

尝试new File([Mixed blobParts], DOMString name, BlobPropertyBag options)

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

二进制数据

我试图避免使用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＆lt; 38 ：
Chrome＆gt; = 38 ：
的火狐：

斑点

传递Blob可能是正确的，适用于Firefox：

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

火狐：

Chrome＆lt; 38 ：

Chrome＆gt; = 38 ：

• 问：那么如何从File提出Blob？

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

Answer 1

File构造函数（以及Blob构造函数）接受一系列部件。一部分不必是DOMString。它也可以是Blob，File或类型化数组。您可以轻松地使用Blob构建文件：

new File([blob], "filename")

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

Answer 2

这适用于我，从画布到文件名（或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 });

或者如果您想要一个斑点

var blob = new Blob([ia], { type: mime });

Answer 3

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

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