まず、どのような問題が発生したかについて話しましょう。まずそういうニーズがある。フロントエンドは、バックエンドから渡されたデータに基づいて画像を動的に生成する必要があります。コピーライティング、背景画像、画像内のユーザー アバターはすべてバックエンド インターフェイスを通じて取得されます。ただし、html2canvas を使用して生成されたキャンバス内の一部の画像は、キャンバス内に正常に生成されました。ただし、一部の写真は表示されません。
公式ドキュメント私はそのプロジェクトに長い間取り組んできましたが、結果は得られませんでした。Google で長い間検索しても結果はありませんでした。この時は若干の絶望感がありました。ふと思いついたので、公式サイトをチェックしてみませんか。そこで公式サイトで以下の内容を見てみました。
制限<br/>
同様に、ページ上にクロスオリジン コンテンツで汚染された他のキャンバス要素がある場合、スクリプトがプロキシの助けを借りずに画像を読み取れるようにするには、スクリプトが使用するすべての画像が同じオリジンの下に存在する必要があります。汚れてしまい、html2canvas で読み取れなくなります。<br/>
このスクリプトは、Flash や Java アプレットなどのプラグイン コンテンツをレンダリングしません。
一体何のことを言っているのでしょうか？ 英語が苦手な学生向けに訳してみます。英語が得意な方は上記を直接読んでも構いません。一般的な意味は、html2canvas ではスクリプトを使用して動作する、つまり html を Canvas に変換するためにスクリプトを使用するということですが、クロスソース画像が使用できないという制限があります。使用すると、html2canvas はリソースを読み取りません。
変換されたキャンバス内の一部の画像が常に空白になるのはこのためです。ページ内にクロスソース画像リソースを使用する他のキャンバスがある場合、html2canvas はそれらを読み取りません。
解決静的リソースを一度転送するだけで、html2canvas の設定でクロスオリジン リソースの読み込みが可能になります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。