jsでpngを作りたいときcanvasなどのAPIを使う方法が一般的 しかし配列にあるデータからpngを作りたい場合 canvasを用意→ループでfillRect→toBlob の手順を踏む必要があり簡単な画像の場合はコストが高くつく 今回はpngの構造を把握してバイナリを直接書くことでpngファイルを生成してみる 動機 Workerスレッドで計算したデータを最終的にimgタグで画面に表示したい OffscreenCanvasは使いたくないのでImageDataでメインスレッドに転送してcanvasに描いてimgに起こしていた これではWorkerスレッドの意味がないのでWorkerスレッドでurlまで完結する画像生成が欲しかった WorkerスレッドでOffscreenCanvasを使わずにPNGを描けたらいいよねということ PNGを知る PNGとは 可逆圧縮を用いた画像フォーマット 可