BlobからFileオブジェクトを作成する方法は？

質問

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 で 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 と クローム .

バイナリデータ

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

Firefoxです。

• Q: では、どうすれば File から Blob ?

ノート : Google Chromeをアップデートするように@apsillersから言われたので、スクリーンショットを追加しました。

解決方法は？

File コンストラクタ（Blob コンストラクタと同様）は部品の配列を受け取ります。パーツは DOMString である必要はありません。Blob、File、または型付き配列であることもできます。このように、Blob から File を簡単に構築することができます。

new File([blob], "filename")

仕様のプロセスや仕様そのものを理解する時間を取らないと、ブラウザが仕様を実装していないとか、仕様が役に立たないとかいう発言はご遠慮ください。