ウェブブラウザでの画像生成は基本的にCanvasを使うが、生成するCanvasの画像サイズはいろいろと制限が多い。調べるとCanvasを使わず画像を生成するライブラリが存在するようなので、その使い方をメモしておく。
使ったのはpngjs。おそらくこれが一番ポピュラーだと思う。残念ながら例示されているサンプルはnode.js上で動作させるためのスクリプトしか無い。半日悩んでウェブブラウザで扱う方法がようやくわかった。
まずはパッケージをインストール。
$ npm install pngjsスクリプトはこんな感じ。
import { PNG } from 'pngjs/browser';
const png = new PNG({ width : 100, height : 100 });
const options = { colorType : 6 };
const buffer = PNG.sync.write( png, options );
const blob = new Blob( [buffer], { type : 'image/png' });
const url = URL.createObjectURL( blob );
const img = document.createElement( 'img' );
img.src = url;
document.body.appendChild( img );幅と高さを指定してインスタンスを生成すると、インスタンスのプロパティdataにimagedata.dataと同等の型付配列が生成されるので、これを操作すれば任意の画像を作成可能。このライブラリでバッファの作成までを担ってくれるので、Blobの作成はJavaScript標準のお作法でOK。