web-dev-qa-db-ja.com

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

クロムのエラー：

キャッチされなかったTypeError：addでDataTransferItemListを実行できませんでした：パラメーター1はタイプFileではありません。

new File(Blob blob, DOMString name)を試す

グーグルで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：
google chrome is retarded Chrome> = 38：
google chrome not retarded anymore Firefox： firefox firebug fileAPI

ブロブ

Blobを渡すことはおそらく正しく、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：では、FileからBlobを作成するにはどうすればよいですか？

注：@apsillersからGoogle Chromeの更新を通知された後、スクリーンショットを追加しました。

javascriptfileapi
42
Tomáš Zato - Reinstate Monica

Fileコンストラクター（およびBlobコンストラクター）は、パーツの配列を取ります。パーツはDOMStringである必要はありません。また、Blob、File、または型付き配列にすることもできます。次のように、Blobからファイルを簡単に構築できます。

new File([blob], "filename")

ブラウザが仕様を実装していない、または仕様プロセスまたは仕様自体を理解するのに時間をかけないと仕様が役に立たないことを表明しないでください。

91
pwnall

これは、blobをファイルに変換するために使用しなければならない完全な構文でした。この構文は、後でサーバーを使用してフォルダーに保存する必要がありました。

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

これは、canvasからFile [or 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 });
0
Arttu Pakarinen