html2canvasで画像が正常にキャプチャできない時の解決方法

質問

まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは、バックエンドから送信されたデータに基づいて画像を動的に生成する必要があります。画像内のテキスト、背景画像、ユーザーアバターはすべてバックエンドインターフェースを通じて取得されます。ただし、html2canvas によって生成されたキャンバスを使用して、キャンバス内にいくつかの画像が正常に生成されました。しかし、一部の写真はどうしても表示できません。

公式ドキュメント

私は長い間プロジェクトに取り組みましたが成功せず、長い間 Google で検索しましたが成功しませんでした。この瞬間、少し絶望がありました。突然、公式サイトに行ってみようかと思いつきました。そこで公式サイトで以下のような内容を見ました。

制限事項<br/>
スクリプトが使用するすべての画像は、プロキシの助けを借りずに読み取ることができるように、同じオリジンの下に存在している必要があります。同様に、クロスオリジン コンテンツによって汚染された他のキャンバス要素がページ上にある場合、それらは汚れたものとなり、html2canvas で読み取れなくなります。<br/>
スクリプトは、Flash や Java アプレットなどのプラグイン コンテンツをレンダリングしません。

それは何についてですか？英語が苦手な人のために翻訳を載せておきます。英語が得意な方は上記のテキストを直接読んでいただけます。一般的な意味は、html2canvas ではスクリプトを使用して操作する、つまりスクリプトを使用して HTML をキャンバスに変換するということですが、クロスソース イメージを使用できないという制限があります。使用すると、html2canvas はリソースを読み取りません。

このため、変換されたキャンバス上の一部の画像は常に空白になります。ページ上にクロスオリジン画像リソースを使用する他のキャンバスがある場合、html2canvas はそれらを読み取りません。

解決

静的リソースを一度転送し、html2canvas 構成でクロスオリジン リソースの読み込みを許可します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。