如何從 Blob 創建 File 對象？

Question

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

鉻中的錯誤：

未捕獲的類型錯誤：無法在DataTransferItemList上執行add ：參數 1 的類型不是File 。

嘗試new File(Blob blob, DOMString name)

在谷歌瀏覽器中，我根據當前規范嘗試了這個：

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

這里的問題是，谷歌瀏覽器並不太符合規范。

未捕獲的類型錯誤：無法構造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

您可以在控制台中嘗試：

鉻 <38 ：
鉻 >=38 ：
火狐：

斑點

傳遞Blob可能是正確的，並且可以在 Firefox 中使用：

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

火狐：

鉻 <38 ：

鉻 >=38 ：

• 問：那么我怎樣才能從Blob制作File呢？

注意：@apsillers 提醒我更新谷歌瀏覽器后，我添加了更多屏幕截圖。

Answer 1

File 構造函數（以及 Blob 構造函數）采用部件數組。 一部分不必是 DOMString。 它也可以是 Blob、文件或類型化數組。 您可以輕松地從 Blob 中構建文件，如下所示：

new File([blob], "filename")

如果您不花時間了解規范流程或規范本身，請不要說瀏覽器沒有實現規范或規范是無用的。

Answer 2

這是我必須用來將 blob 轉換為文件的完整語法，后來我不得不使用我的服務器將其保存到一個文件夾中。

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

Answer 3

這對我有用，從畫布到文件 [或 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 });

或者如果你想要一個 blob

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