最近、暇になったので、roteの機能のバグを修正し続けています。具体的には、ノートを共有画像としてダウンロードする機能です。その間、cloudflare の CORS 設定を何度も設定し直し、2 つの npm モジュールを変更し、何度も試行錯誤し、テストしましたが、最終的には完璧ではない状態になりました。この記事では、その間に遭遇した問題をまとめています。もし同様の機能を実装している場合、この記事は役に立つかもしれません。そうでなければ、楽しんで読んでください :@(装大款)
初陣敗北#
React の HTML をイメージに変換することは、かなり一般的な要求です。使用可能なプラグインには、html2canvasとhtml-to-imageがあります。最初に使用したのは html2canvas で、最初は順調に進んでいましたが、ノートにタグを追加した後、問題が発生しました。タグに背景色が含まれていると、文字の背景がオフセットされる現象が発生します
{rote.tags.map((tag: any, index: any) => {
return (
<span
className={` px-2 rounded-md ${themes[themeIndex].tagClass}`}
key={`tag_${index}`}
>
{tag}
</span>
);
})}
このコードのことです。ウェブページのプレビューでは問題ありませんが、キャンバスで画像を生成すると、文字の背景色がオフセットするバグが発生します。おそらく tailwindcss と互換性がないのかもしれません。カスタムクラス名を試してみたり、ネイティブの CSS を使用してみたりしましたが、効果はありませんでした。他の試行も行いましたが、最終的にはモジュールのバグだと思い、背景色を削除しました。 :@(皺眉)
再試行#
しばらく時間が経ち、落ち着いた気持ちで再度この問題に取り組みました。その間、stackoverflow を見て解決策を見つけました。画像にcrossOrigin="anonymous"属性を追加する必要があります。最初は問題が解決したと思いました。また、モジュールを html-to-image に変更し、タグの問題も解決しました。ついに画像付きのノートカードを生成することができるようになりました :@(鼓掌) しかし、すぐに問題が発生しました。開発環境では正常に画像付きの共有画像を生成できますが、モバイル端末では空白のままです。心が折れました :@(喷血)
コミットの様子から、私の心の変化が分かるでしょう :@(口水)
その間、奇妙な現象に気付きました。画像がキャンバスの前にキャッシュされている場合、キャンバスを使用すると問題が発生し、やはりクロスオリジンのエラーが発生します。キャッシュの有効化 / 無効化を試した後、問題は解消しました。 :@(想一想) 問題を解決するために、画像リンクに${timestamp}を追加する方法を見つけました。後で html-to-image のオプションで同様の機能を実現することに気付きました。cacheBust: trueというオプションです。問題が解決したと思いました。 :@(汗)
しかし、モバイル端末でテストすると、画像はまだ空白のままでした。再度 PC の Chrome でテストすると、すべて正常でした。私の心の状態が微妙に変化しました。最終的には html-to-image の issue エリアでImage is not showing in some cases iOS, Safariという類似の状況を見つけ、Safari の問題だと確認しました。コメントエリアの解決策を使用し、問題が解決したようです。Safari が（機会があれば）正常に画像を生成するようになりました。しかし、この解決策は完璧ではなく、画像が大きい場合にはまだ空白の img が表示される可能性があります...
今でもこの機能は完璧ではありませんが、私は諦めました :@(投降) （一時的に）
最後に、この機能で生成された画像を共有します。 :@(长草)
