【JavaScript】 自力でCanvas画像をBMPに変換する

window.addEventListener( "DOMContentLoaded" , ()=>{
    // dpi取得
    const dpi = document.getElementById("inch").offsetHeight;
    start("file_select","canvas","button",dpi)
});

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("読み込めませんでした");

        // FileReaderの生成
    const reader = new FileReader();
    reader.onload = () => image.src = reader.result

        // File APIで画像ファイルを選択
    document.getElementById(fileSelectId)
        .addEventListener("change",function(){
            reader.readAsDataURL(this.files[0]);
        });

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

    // ビットマップファイルダウンロード
const bitmapDownload = (context,dpi) =>{
    const {width,height} = context.canvas;
    const imageData = context.getImageData(0,0,width,height).data;

    imageDataToBmp( imageData , width , height ,dpi )
        .then( buffers => {
            const blob = new Blob( buffers, { type:  "octet/stream" });
            const link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = "image.bmp";
            link.click();

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

   // RGBAをRGBに変換（透明度考慮）
const  RGBAtoRGB = ( r , g , b , a ) =>{
    if( a === 0 ) return [255,255,255];

    const opacity = a / 255;
    const cb = Math.round(b * opacity + 255 * ( 1 - opacity));
    const cg = Math.round(g * opacity + 255 * ( 1 - opacity));
    const cr = Math.round(r * opacity + 255 * ( 1 - opacity));
    return  [cr,cg,cb];
};

// 入力されたビット数を4バイトに合わせる
const widthAdjustBytes = widthBits =>
    Math.ceil(Math.ceil(widthBits/8)/4) * 4;

   // BMPバイナリイメージの生成
const imageDataToBmp = (imageData,width,height,dpi=96) =>{
    const dpm = Math.ceil((dpi === 0 ? 96 : dpi) * 39.3701 );

    const imgMgr = new imgManager( imageData,width,height );
        // データ部生成
    const bitmapData = getBitmapData(imgMgr);
        // パレットデータ取得
    const paletteData = imgMgr.palette;
        // BITMAPFILEHEADERのセット
    const dataOffset = paletteData.buffer.byteLength +  14 + 40;
    const fileSize = bitmapData.buffer.byteLength + dataOffset;

    const fileHeader =  getHeader( [U8,U8,U32,U16,U16,U32]
        ,["B".charCodeAt(0) , "M".charCodeAt(0) , fileSize , 0 , 0 ,dataOffset]);

        // BITMAPINFOHEADERのセット
    const infoHeader =  getHeader( [U32,U32,I32,U16,U16,U32,U32,U32,U32,U32,U32]
        ,[40 , imgMgr.width , imgMgr.height  , 1 , imgMgr.bitPerPixel
            ,imgMgr.compression , 0 , dpm , dpm , paletteData.length , paletteData.length]);

    const buffers = [fileHeader.buffer,infoHeader.buffer,paletteData.buffer,bitmapData.buffer];
    return new Promise( resolve => resolve( buffers) );

};

    // データ部生成
const getBitmapData = (imgMgr) =>{
    const size = widthAdjustBytes(imgMgr.width * imgMgr.bitPerPixel)
        * imgMgr.height;
    const setter = new Set24( size );
    return imgMgr.imageConvert( setter );
};

    // ヘッダー生成用フォーマット定数
const [U8,U16,U32,I32] = (()=>{
    const dp = DataView.prototype;
    return [[dp.setUint8,1],[dp.setUint16,2],[dp.setUint32,4],[dp.setInt32,4]];
})();
    // ヘッダー生成
const getHeader = (format,values)=> {
    const size = format.reduce((a,b)=>a+b[1],0);
    const buffer = new DataView(new ArrayBuffer( size ));
    values.reduce((a,b,index)=>{
        format[index][0].call(buffer,a,b,true);
        return a + format[index][1];
    },0);
    return buffer;
};

　// imageData.data(DataView) からパレットを抽出
const extractPalette = imageData =>{
    const dataLength =  imageData.byteLength;
    const paletteBuffer = new Uint32Array(256); // パレット用バッファー

    let indexStart = 256;
    for( let i = 0 ; i < dataLength ; i += 4 ){
        const color = imageData.getUint32( i ); // ピクセルRGBA(32bit)をBEで取得
        if( paletteBuffer.indexOf(color,indexStart) === -1){ // indexStartから最後まで検索
            if( indexStart <= 0) { // 色が256以上ある パレット無効
                return null;
            }
            indexStart --;
            paletteBuffer[indexStart]=color;
        }
    }
    if( indexStart === 256 ) return null;
    // paletteBufferから使用している部分を切り出し
    return indexStart === 0 ? paletteBuffer : paletteBuffer.slice(indexStart);
};

// パレットを有効にするかの判定
const judgementPaletteSize = (palette,imgManager)=>{

    if( palette === null ) return null;
    const {width,height} = imgManager;

    const length = palette.length;
    const bitPerPixel = imgManager.lengthToBitPerPixel(palette);
        // パレット未使用時サイズ
    const rgbFileSize = widthAdjustBytes(width * 24) * height;
        // パレット使用時のパレット＋ビットマップデータバイト数
    const paletteFileSize = widthAdjustBytes(width * bitPerPixel)
            * height + length * 4;
        // パレット出力とRGB出力のサイズを比較
    return ( paletteFileSize > rgbFileSize ) ? null : palette;

};

    // パレットをビットマップファイルでの形式に変換(RGBA=>BGR)
const convertPalette = (palette)=>{ // paletteはUint32Array
        // Uint32ArrayはLEなので、メモリ上にRGBAはABGRでセットされている
        // DataViewで1バイトずつ処理する
    const dView = new DataView( palette.buffer );
    for( let i = 0 ; i < dView.byteLength ; i+=4 ){
        const rgb = RGBAtoRGB( dView.getUint8(i+3) , dView.getUint8(i+2)
            , dView.getUint8(i+1) , dView.getUint8(i)  );
        dView.setUint8(i,rgb[2]);dView.setUint8(i+1,rgb[1]);
        dView.setUint8(i+2,rgb[0]);dView.setUint8(i+3,0);
    }
    return palette;
};

 // ビットマップデータ部生成
const getBitmapData = imgMgr =>{

    const size = widthAdjustBytes(imgMgr.width * imgMgr.bitPerPixel)
        * imgMgr.height;

    // データセットクラスをセレクト
    const setter = (()=>{
        switch (imgMgr.bitPerPixel ){
            case 24:return  new Set24(size);
            case 8:return  new Set8(size);
            case 4:return  new Set4(size);
            case 1:return  new Set1(size);
        }
    })();
        // データ出力
    return imgMgr.imageConvert( setter );
};

// rleエンコード size 正：確保するバイト数 負:計測モード 最大バイト数
const rleEncode = (imgManager,size)=>{
    const bitPerPixel = imgManager.bitPerPixel;
    if( bitPerPixel !== 4 && bitPerPixel !== 8 )
        return size < 0 ? 0 : [];

    const base = size < 0 ? OutputCounter : SetBuffer;
    const setter = new (( bitPerPixel === 4 ? SetRle4 : SetRle8 )(base))( Math.abs(size));
    imgManager.imageConvert(setter);
    return setter.result;
}

// パレット/RLEを有効にするかの判定
const judgementPaletteSize = (palette,imgManager)=>{

    if( palette === null ) return [null,0];
    const {width,height} = imgManager;

    const paletteBytes = palette.length * 4; // パレットバイト数
    const bitPerPixel = imgManager.lengthToBitPerPixel(palette);
    // パレット未使用時データサイズ
    const rgbFileBytes = widthAdjustBytes(width * 24) * height;
    // パレット使用時のデータ部のサイズ
    const paletteBmpBytes =
        widthAdjustBytes(width * bitPerPixel) * height;

    if( bitPerPixel === 4 || bitPerPixel === 8 ){ // rle対象
        const maxSize = Math.min( rgbFileBytes , paletteBmpBytes );
        const result = rleEncode(imgManager,maxSize * -1);
        if(result > 0) return [palette,result]
    }
    // パレット出力とRGB出力のサイズを比較
    return ( paletteBmpBytes + paletteBytes > rgbFileBytes )
            ? [null,0] : [palette,0];
};

const getImageBuffer = (canvas,type) =>{
    const types = { "PNG":"image/png" , "JPEG" : "image/jpeg" };
    return  new Promise( resolve=>{
        canvas.toBlob( blob =>resolve(blob.arrayBuffer()),types[type],0.7);
    });
}