Как создать объект File из Blob?

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

Ошибка в хроме:

Uncaught TypeError: Не удалось выполнить add on DataTransferItemList: параметр 1 не имеет тип File.

Попытка `new File(Blob blob, DOMString name)`

В Google Chrome я пробовал это, в соответствии с текущей спецификацией:

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

Проблема заключается в том, что Google Chrome не придерживается спецификаций.

Uncaught 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

Передача Blob, вероятно, правильная и работает в Firefox:

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

Firefox:

Chrome < 38:

Chrome >= 38:

Q:. Как я могу сделать File из Blob?

Примечание. Я добавил больше скриншотов после того, как @apsillers напомнили мне об обновлении Google Chrome.

Ответы

Ответ 1

Конструктор файла (а также конструктор Blob) принимает массив частей. Часть не должна быть DOMString. Это может быть также Blob, File или типизированный массив. Вы можете легко создать файл из Blob следующим образом:

new File([blob], "filename")

Пожалуйста, воздержитесь от заявления о том, что браузеры не реализуют спецификацию или что спецификация бесполезна, если вы не нашли времени для понимания процесса спецификации или самой спецификации.

Ответ 2

это работает со мной, от холста до файла [или 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 });