web-dev-qa-db-fra.com

Comment créer un objet File à partir de Blob?

DataTransferItemList.add Vous permet de remplacer l'opération de copie en javascript. Cependant, il n'accepte que l'objet File.

Copier l'événement

Le code de mon événement 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);
}

L'erreur dans Chrome:

Erreur de type non détectée: échec de l'exécution de add sur DataTransferItemList: le paramètre 1 n'est pas de type File.

Essayer la new File(Blob blob, DOMString name)

Dans Google Chrome J'ai essayé cela, selon les spécifications actuelles :

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

Le problème est que Google Chrome ne respecte pas beaucoup les spécifications.

TypeError non capturé: échec de la construction de File: constructeur illégal

Firefox non plus dans ce cas:

Le paramètre de méthode est manquant ou non valide.

Essayer la new File([Mixed blobParts], DOMString name, BlobPropertyBag options)

La solution suggérée par @apsillers ne fonctionne pas trop. Il s'agit d'une méthode non standard utilisée (mais inutile) dans les deux Firefox et Chrome .

Données binaires

J'ai essayé d'éviter le blob, mais le constructeur du fichier a quand même échoué:

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

Vous pouvez essayer cela dans la console:

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

Goutte

Passer Blob est probablement correct et fonctionne dans 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: Alors comment faire File à partir de Blob?

Remarque : J'ai ajouté plus de captures d'écran après que @apsillers m'a rappelé de mettre à jour Google Chrome.

javascriptfileapi
42
Tomáš Zato - Reinstate Monica

Le constructeur File (ainsi que le constructeur Blob) prend un tableau de pièces. Une pièce ne doit pas nécessairement être une DOMString. Il peut également s'agir d'un objet blob, d'un fichier ou d'un tableau typé. Vous pouvez facilement créer un fichier à partir d'un blob comme ceci:

new File([blob], "filename")

Veuillez vous abstenir de déclarer que les navigateurs n'implémentent pas la spécification ou que la spécification est inutile si vous ne prenez pas le temps de comprendre le processus de spécification ou la spécification elle-même.

91
pwnall

C'était la syntaxe complète que j'ai dû utiliser pour convertir un blob en fichier, que j'ai ensuite dû enregistrer dans un dossier à l'aide de mon serveur.

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

cela fonctionne avec moi, du canevas au fichier [ou blob], avec le nom de fichier!

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

Ou si vous voulez un blob

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