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

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

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

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

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

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

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

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のサイズも大きくなるので、幅と高さを小さくすることも考慮するといいかもしれませんね。

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

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