如何从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中的错误:

未捕获的类型错误:未能执行add上DataTransferItemList:参数1的类型为不File.

试着 new File(Blob blob, DOMString name)

在谷歌浏览器中,我根据当前的规范尝试了这个:

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

这里的问题是,谷歌浏览器不太符合规格.

未捕获的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 <38:
Chrome> = 38:
Firefox:

斑点

传递Blob可能是正确的,适用于Firefox:

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

火狐:

Chrome <38:

Chrome> = 38:

• 问:那么,如何能够使File从Blob？

注意:我在@apsillers提醒我更新Google Chrome后添加了更多屏幕截图.

Answer 1

File构造函数(以及Blob构造函数)接受一系列部件.部件不必是DOMString.它也可以是Blob,File或类型化数组.您可以轻松地从Blob构建文件,如下所示:

new File([blob], "filename")

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

Answer 2

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

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

Answer 3

这对我有用，从画布到文件[或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 });