【JavaScript】 Canvasの画像をBMPで出力（ダウンロード）する

ブラウザのCanvas要素に描画した画像を、BMP形式でダウンロードしてみます。

CanvasのtoDataURL()は、画像データをPNGやJPEG形式に変換して、データＵＲＬを生成してくれます。

FirefoxはtoDataURL()の引数に"image/bmp"を指定すると、BMP形式に変換してくれます。

const dataURL = canvas.toDataURL("image/bmp");
const link = document.createElement("a");
link.href = dataURL;
link.download = "image.bmp";
link.click();

URL.revokeObjectURL(link.href);
link.remove();

今回はデモを作成したので、確認してみてください。
デモには、ソースも掲載してありますので、そちらも参考にしてみてください。

デモをGoogle Chromeで実行すると、image.bmpというファイルをダウンロードできます。

問題なく動く、と思ったのですが…

生成されたデータＵＲＬは、次のような文字から始まっていました。

data:image/png;base64,iVBORw0KGgoAAAANSUhEU

image/png となっているので、生成されたのは PNG だったようです。

ブラウザによって使えたり使えなかったりで、本当に困りますね。

とりあえずは、toDataURL()が image/bmp に対応しているか確認する必要がありそうです。

次の記事で紹介しているので、参考にしてみてください。

対応してないなら自力で変換すればいいじゃないか・・・・
ということで、やってみました。

詳しくは、次のページを読んでみてくださいね！