HTML

<p>画像ファイル(jpg,png)を読み込み、BMPで出力します。</p>
<p><input type="file" id="file_select"></p>
<p><canvas id="canvas"></canvas></p>
<p><button id="button">bmp生成</button></p>

JavaScript

(()=>{
    "use strict";


    // ビットマップファイルダウンロード
    const bitmapDownload = (canvas) =>{

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

    const start = (fileSelectId,canvasId,buttonId,dpm) =>{

        const context = document.getElementById(canvasId).getContext("2d");

        const image = new Image();
        image.onload = ()=>{
            context.canvas.width = image.width;
            context.canvas.height = image.height;
            context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height);
        };
        image.onerror = ()=>alert("読み込めませんでした");

        const reader = new FileReader();
        reader.onload = () => image.src = reader.result

        document.getElementById(fileSelectId)
            .addEventListener("change",function(){
                reader.readAsDataURL(this.files[0]);
            });

        document.getElementById(buttonId)
            .addEventListener("click",()=>bitmapDownload(context.canvas));
    };

    window.addEventListener( "DOMContentLoaded" , ()=>{

        start("file_select","canvas","button")
    });
})();