Web上で沢山の画像を扱うとき、メモリと処理負荷を意識したうえで最適なデータ形式ってなんでしょうか？

Question

実現したいこと

jsでペイントツールを作っています。そこでレイヤーを大量に作りたいと思ったのですが、Canvasデータのまま各レイヤーを管理していくとメモリが大量に圧迫されてしまいます。
現在描画中のレイヤー以外は必ずしもCanvas形式で保持しておく必要がないので、もっとよい形式があるのではないかと考えています。

処理負荷について

Canvasをなんらかの別のデータ形式に変換するときの負荷はなるべく軽くしたいです。
逆に、描画負荷はある程度無視できます。

補足

作成中のペイントツールはただパスを引くだけでなく、「消しゴム機能」や「マスク機能」「範囲選択して移動する機能」を含んでいます。そのため、SVG形式でデータ扱うことは実現難易度が高くなりすぎるという理由から、できればピクセルデータで管理したいです。

Comments

[yambejp]

SVGという選択肢はありますか？

[jopeg]

一応あります。
ただ、作成中のペイントツールはただパスを引くだけでなく、「消しゴム機能」や「マスク機能」「範囲選択して移動する機能」などがあり、それらを踏まえてSVGで扱うことが難しいと感じています。

[8524ba23]

https://teratail.com/help/question-tips#questionTips11
https://teratail.com/help/question-tips#questionTips12
https://teratail.com/help/question-tips#questionTips2
https://teratail.com/help/question-tips
は読みましたか？
読んだ結果を本文に反映ください。解決のヒントを探れるかもしれません。

[jopeg]

ありがとうございます。
読んだことがなかったので参考にしてみます！

Answer 1

速度を気にしないなら、未使用時は toBlob() で PNG 形式などの Blob にしておいて、使用するときに URL.createObjectURL() と Image で描画するといいかもしれません。

Comments

[jopeg]

回答ありがとうございます！
ちなみにですが、toBlob()以外にもtoDataURL()でbase64に変換する方法もありそうですが、この2つを比べたときに、Blob形式を採用する利点があれば教えていただきたいです。

[int32_t]

実測したことはないですが、ToDataURL() より toBlob() の方がメモリ消費量も処理速度も優れているはずです。

[jopeg]

なるほど。試してみます！