Node.jsのBufferを使って、画像をbase64のバイナリ形式に変換してHTMLに埋め込む

Puppeteerというライブラリを使ってHTMLからPDFを作成していた時に、画像ファイルが表示されない（読み込まれない）という問題が発生
→ローカルのファイルは読み込めないのでバイナリで埋め込む必要がある、とのことだった

Bufferを使って変換する方法が簡単にできたのでメモ

まず、画像をバイナリに変換する方法

logic.js

// 画像ファイルを読み込む
//../../assets/image.pngは読み込むファイルのパス
const imageBuffer = fs.readFileSync(path.resolve(__dirname, '../../assets/image.png'));
// BufferをBase64文字列に変換
const base64String = imageBuffer.toString('base64');

HTMLの実装

template.html

<img src="data:image/png;base64,${binaryImage}" alt="alt text" />

バイナリ文字列を置き換える

logic.js

htmlContent = htmlContent.replace('${binaryImage}', base64String);

バイナリに変換する方法は色々あるみたいだけど、このやり方は少ない行数ですっきり書けて良かった