最近暇な時間ができたので、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 を使用したりしましたが、効果はありませんでした。他の試行も行いましたが、最終的にはモジュールのバグだと思い、背景色を削除しました。 :@(皺眉)
再試行#
しばらく時間が経ち、落ち着いた心境で再びこの問題に取り組みました。その間、Stack Overflow で解決策を見つけました。画像に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 が表示される可能性があります...
現時点では、この機能はまだ完璧ではありませんが、私は諦めました :@(投降) （一時的に）
最後に、この機能で生成された画像を共有します :@(长草)
