javascript - new - ¿Cómo crear un objeto File desde Blob?

javascript save file

Question

DataTransferItemList.add permite anular la operación de copia en javascript. Sin embargo, solo acepta el objeto File .

Evento de copia

El código en mi copy evento:

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

El error en chrome:

No se detectó TypeError: Error al ejecutar add en DataTransferItemList : el parámetro 1 no es de tipo File .

Probar el new File(Blob blob, DOMString name)

En Google Chrome intenté esto, de acuerdo con la especificación actual :

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

El problema aquí es que Google Chrome no se adhiere mucho a las especificaciones.

Error no detectado: error al construir el File : constructor no válido

Ni tampoco Firefox en este caso:

El parámetro del método falta o no es válido.

Probar el new File([Mixed blobParts], DOMString name, BlobPropertyBag options)

La solución sugerida por @apsillers tampoco funciona. Este es un método no estándar utilizado (pero inútil) tanto en Firefox como en Chrome .

Datos binarios

Intenté evitar el blob, pero el constructor de archivos falló de todas formas:

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

Puedes probar eso en la consola:

Cromo <38 :
Chrome> = 38 :
Firefox :

Gota

Pasar Blob es probablemente correcto y funciona en Firefox:

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

Firefox:

Cromo <38 :

Chrome> = 38 :

• Q: Entonces, ¿cómo puedo hacer File from Blob ?

Nota : agregué más capturas de pantalla después de que @apsillers me recordó que actualizara Google Chrome.

Answer 1

El constructor de archivos (así como el constructor de blob) toma una matriz de partes. Una parte no tiene que ser un DOMString. También puede ser un blob, un archivo o una matriz escrita. Puedes construir fácilmente un archivo a partir de un blob como este:

new File([blob], "filename")

Por favor, absténgase de decir que los navegadores no implementan la especificación o que la especificación es inútil si no se toma el tiempo para entender el proceso de especificación o la especificación en sí.