JSでBlobオブジェクトをファイルとしてダウンロードする方法

yosi2024/07/24 12:27

JSでBlobオブジェクトをファイルとしてダウンロードする方法を教えてください。

JSとTSの両方のコードを作成してください。
BlobオブジェクトはPNG画像とします。

Answerer AIPowered by gpt-3.5-turbo

以下がJSとTSのコード例です。

JSコード:

function downloadBlobAsFile(blob, fileName) {
  const url = URL.createObjectURL(blob);
  const anchorElem = document.createElement("a");
  anchorElem.href = url;
  anchorElem.download = fileName;
  anchorElem.click();
  URL.revokeObjectURL(url);
}

// Blobオブジェクトを作成する例 (PNG画像の場合)
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, 100, 100);
canvas.toBlob(function(blob) {
  downloadBlobAsFile(blob, "image.png");
}, "image/png");

TSコード:

function downloadBlobAsFile(blob: Blob, fileName: string): void {
  const url = URL.createObjectURL(blob);
  const anchorElem = document.createElement("a");
  anchorElem.href = url;
  anchorElem.download = fileName;
  anchorElem.click();
  URL.revokeObjectURL(url);
}

// Blobオブジェクトを作成する例 (PNG画像の場合)
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.fillRect(0, 0, 100, 100);
canvas.toBlob(function(blob) {
  downloadBlobAsFile(blob, "image.png");
}, "image/png");

上記のコードでは、downloadBlobAsFile関数を定義しています。この関数はBlobオブジェクトとファイル名を受け取り、Blobオブジェクトをダウンロードします。

画像の例として、キャンバス要素を作成し、その上に赤い四角を描画しています。その後、canvas.toBlobメソッドを使用してPNGファイルとしてBlobオブジェクトを生成し、downloadBlobAsFile関数に渡しています。

なお、ブラウザのサポートや実行環境によっては動作しない場合がありますので、ご注意ください。

コメントするにはログインが必要です

yosi