[バグレポート] テキスト>詳細オプション>色の変更でクラッシュする

[yKicchan]

現象

再現手順

1. なんでもいいので文字を入力
2. サンプル表示
3. 「効果を付ける」からアニメーションや特殊効果を付与(アニメーションgifにするとクラッシュまで早くなりました)
4. テキスト設定に戻り「詳細オプション」からカラーピッカーで色を変更(ぐるぐる色変えると特にクラッシュまで早いです)
5. 上記画像の通りクラッシュ後のページが表示される

経緯

アニメーションを設定して、グラデーションやコントラストの色調整(目まぐるしく色を変えたりはせず、ぽちぽちと触っていただけ)をしていたらクラッシュし、軽く手順を調べたところ色の変更が複数リアルタイムに反映されることから処理が重くなりクラッシュしているようでした。

謝辞

楽しいツールを作ってくださってありがとうございます！ いつも利用させていただいています！

[zk-phi]

ありがとうございます :pray:

おっしゃる通り、パラメータを少しでもいじるたびに絵文字を生成しなおしているので、ドラッグで設定するタイプのパラメータは実はかなり負荷高いのですよね…w

ぱっと思いつく対策で：

1. 絵文字を非同期で生成して、前の絵文字が生成中の間は次の絵文字の生成を始めない
2. タイマーで適当に間引く (「最大でも１秒に n 回しか生成しない」)

があるかなーと思っていますが、 1. をやるにはブラウザの OffscreenCanvas 対応 https://developer.mozilla.org/ja/docs/Web/API/OffscreenCanvas#browser_compatibility が進む必要がありそうなのが悩みです。

cf. https://scrapbox.io/MEGAMOJI/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AE%E7%94%9F%E6%88%90%E3%81%8C%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%EF%BC%86%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E9%81%85%E3%81%84%E5%95%8F%E9%A1%8C

[zk-phi]

gif エンコーダーをリプレースして、メモリリーク問題が解決したのでクラッシュはしなくなりました👏

ただ文字から画像への変換が同期的で、タスクが詰まって重くなってしまう問題は解決していないのでこの issue は残しておきます

[zk-phi]

文字から画像への変換も、タイマーで間引いて負荷を落とすことで応急措置したので、ほぼほぼ快適に使えるようになったと思います :pray: