JavascriptでBMPのカラーパレットを用いた2値画像を作成したい

Question

前提・実現したいこと

JavaScriptでBMP画像のカラーパレットを用いて0と1のみを使った2値画像を作成しようとしています。
しかし、任意のデータを出力しようとすると真っ黒の画像しか出力されなかったため、データ部かヘッダ部か表示側かどの問題なのか切り分けをしたいです。
以下のソースコードでヘッダ部の設定が問題ないか確認していただけますでしょうか。

該当のソースコード

let width = 320
let height = 240
let headSize = 54　//ヘッダ部(パレットデータを除く)のサイズ
let paletteSize = 8  //カラーパレットのサイズ
let pixelSize = width * height /8  
//データ部のサイズ、1画素が1bitのため1byteで割る
let HeadBuf = new DataView(new ArrayBuffer(headSize + paletteSize))
　
//ファイルヘッダ
HeadBuf.setUint8(0x0, "BM".charCodeAt(0))
HeadBuf.setUint8(1, "BM".charCodeAt(1));
HeadBuf.setUint32(2, headSize + pixelSize + paletteSize, true)
HeadBuf.setUint16(6, 0, true)
HeadBuf.setUint16(8, 0, true)
HeadBuf.setUint32(10, headSize + paletteSize, true)

//情報ヘッダ
HeadBuf.setUint32(14, headSize + paletteSize - 14, true)
HeadBuf.setUint32(18, width, true)
HeadBuf.setUint32(22, height, true)
HeadBuf.setUint16(26, 1, true)
HeadBuf.setUint16(28, 1, true)
HeadBuf.setUint32(30, 0, true)
HeadBuf.setUint32(34, pixelSize, true)
HeadBuf.setUint32(38, 0, true)
HeadBuf.setUint32(42, 0, true)
HeadBuf.setUint32(46, 2, true)
HeadBuf.setUint32(50, 0, true)

//白のカラーパレット:0
HeadBuf.setUint8(54, 255)
HeadBuf.setUint8(55, 255)
HeadBuf.setUint8(56, 255)
HeadBuf.setUint8(57, 0)

//黒のカラーパレット:1
HeadBuf.setUint8(58, 0)
HeadBuf.setUint8(59, 0)
HeadBuf.setUint8(60, 0)
HeadBuf.setUint8(61, 0)

データ部に関しては、0と1のビット列で画像データを表現しております。0のビットの場合は白、1のビットの場合は黒が表現出来ているという認識です。

発生している問題・エラーメッセージ

エラーメッセージは出ておりませんが、htmlで出力させると真っ黒の画像が表示されます。

試したこと

データ部の中身に関しては0と1が混ざったデータが入っていることが確認できたため、データ部が原因とは少し考えづらいです。

補足事項

データ部側のBufferを設定しているプログラムを一応追記しておきます。

setPictureDataChunk(data, pixelSize)
//data :データ部が各ビットごとに0と1のみでArrayに1画素ずつ入っている
//pixelSize :width*height/8

function setPictureDataChunk(data, Size) {
    let output = new DataView(new ArrayBuffer(Size))
    for (let i = 0; i < data.length; i += 8) {
        let temp = 0
        for (let j = 0; j < 8; j++) {
            temp = temp << 1
            temp += data.shift()
        }
        output.setUint8(i / 8, temp)
    }
    return output
}

追記：出力部分のプログラム

//picArrayには先述したヘッダ部とデータ部を結合したArrayBufferが入っている
const picBlob = new Blob([picArray], { type: 'image/bmp' })
const picURL = myURL.createObjectURL(picBlob)

const img = document.createElement('img')
img.setAttribute('src', picURL)
document.getElementById('show_data').appendChild(img)
//show_dataはdiv要素

この表示部分自体は別のbmp画像をそのまま表示させた場合真っ黒にならずそのまま出力されています。

Comments

[maisumakun]

> htmlで出力させると真っ黒の画像が表示されます。

出力・読み取り部分はどのようなコードでしょうか？

[m-ksolt]

コメントありがとうございます。追記させていただきました。

Answer 1

何らかの画像データが表示されるまでには自己解決したので記入させていただきます。
記載していたソースコードの中で以下の部分が間違っていました。

HeadBuf.setUint32(14, headSize + paletteSize - 14, true)
//↓
HeadBuf.setUint32(14, headSize - 14, true)

情報ヘッダの最初の部分の情報ヘッダ自身のサイズを入れる部分はカラーパレットのサイズを含まないため、そこが間違っていました。
ここで恐らく情報ヘッダとカラーパレットの境界線が変になっていたので真っ黒の画像が表示されたのだと思います。