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:

Chrome >=38:

Firefox:

Blob

Passing Blob is probably correct and works in Firefox:

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

Firefox:

Chrome <38:

Chrome >=38:

Q: So how can I make File from Blob?

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

回答1:

The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn't have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this:

new File([blob], "filename")

Please refrain from stating that browsers don't implement the spec or that the spec is useless if you don't take the time to understand the spec process or the spec itself.

回答2:

this works with me, from canvas to File [or Blob], with filename!

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

Or if you want a blob

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

回答3:

This was the complete syntax which I had to use to convert a blob into a file, which I later had to save to a folder using my server.

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

来源：https://stackoverflow.com/questions/27251953/how-to-create-file-object-from-blob

标签

javascript

fileapi