How to create File object from Blob?

DataTransferItemList.add allows you to override copy operation in javascript. It, however, only accepts File object.

Copy event

The code in my copy event:

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

The error in chrome:

Uncaught TypeError: Failed to execute add on DataTransferItemList: parameter 1 is not of type File.

Trying the new File(Blob blob, DOMString name)

In Google Chrome I tried this, according to the current specification:

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

Problem here is, that Google Chrome doesn't stick to specifications very much.

Uncaught TypeError: Failed to construct File: Illegal constructor

Neither does Firefox in this case:

The method parameter is missing or invalid.

Trying the new File([Mixed blobParts], DOMString name, BlobPropertyBag options)

Solution suggested by @apsillers doesn't work too. This is non stadard method used (but useless) in both Firefox and Chrome.

Binary data

I tried to avoid blob, but the file constructor failed anyway:

  //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

You can try that in console:

Chrome <38:
google chrome is retarded Chrome >=38:
google chrome not retarded anymore Firefox: firefox firebug fileAPI

Blob

Passing Blob is probably correct and works in Firefox:

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

Firefox:
Firefox firebug
Chrome <38:
google chrome is retarded
Chrome >=38:
google chrome not retarded anymore

  • Q: So how can I make File from Blob?

Note: I added more screenshots after @apsillers reminded me to update Google Chrome.

157969 次浏览
小开
最佳答案

File 构造函数(以及 Blob 构造函数)接受一个部件数组。零件不一定是 DOMString。它也可以是 Blob、 File 或类型化数组。你可以很容易地从一个 Blob 中构建一个文件，如下所示:

new File([blob], "filename")
小开

这与我一起工作，从画布到文件[或 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 });
小开

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

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

提交答案