Canvas画像処理

【JavaScript】 CanvasのtoDataURL()がimage/bmpに対応しているか確認する

更新日:2022/08/01

CanvasのtoDataURL()は、一部のブラウザでBMP形式をサポートしています。
そこで、ブラウザが特定の形式をサポートしているかどうかをJavaScriptコードで確認してみます。

 

考え方

toDataURL()を実行してみて、先頭に指定したファイルタイプが含まれていればサポートされていると考えられます。

例えば canvas.toDataURL("image/bmp") を実行して、結果が data:image/bmp から始まれば BMPをサポートしています。

サポートされていないときは、デフォルトの image/png でデータURLが生成されるので、data:image/png から始まります。

 

ソース例

Canvasがhtml内にあるなら、それを利用できます。
無い場合は、Canvasを作成します。

次のようなコードで確認できます。

image/bmpをサポートしているか確認する例


const checkImageTypeSupport = imageType =>{
    const canvas = document.createElement("canvas");
    return canvas.toDataURL(imageType)
        .indexOf("data:" + imageType) === 0;
}
window.addEventListener( "DOMContentLoaded" , ()=> {
    const imageType = "image/bmp";
    document.write( imageType + "に対応して" +
        (checkImageTypeSupport(imageType) ? "います" : "いません"));
});

Canvasの幅と高さが大きいと生成されるデータURLのサイズも大きくなるので、幅と高さを小さくすることも考慮するといいかもしれませんね。

 

データURLからファイルをダウンロードする

toDataURL()で生成したデータURLは、aタグ要素を経由することでダウンロードできます。

次の記事で紹介しているので、見てね!

更新日:2022/08/01

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。