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

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

質問

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

公式ドキュメント

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

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

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

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

解決

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

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

<<:  Dockerは単一のイメージを使用して複数のポートにマッピングします

>>:  JavaScript で知らない Object.entries の使い方

推薦する

MySQLデータベースに画像を保存するいくつかの方法

通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

Tomcatの各ポートの機能の詳細な説明

tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...

MySQL 接続とコレクションの簡単な分析

結合クエリ結合クエリとは、2 つ以上のテーブル間のマッチング クエリを指し、一般的には水平操作と呼ば...

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

docker-compose で Jenkins をインストールする際の実践的なメモ

ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...

Apache Bench ストレステストツールの実装原理と使用状況分析

1: スループット(1秒あたりのリクエスト数)サーバーの同時処理能力を定量的に表したもので、reqs...

Tomcat のインストール後に起こりうる問題の紹介

1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

JS で美しい条件式を書く方法についての簡単な説明

目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...

Windows Server 2008R2、2012、2016、2019 の違い

目次共通バージョンの紹介共通バージョンのダウンロードアドレスとインストール以下に簡単な違いを示します...

MYSQLのバックアップデータのスケジュールクリアの特定の操作

1|0 背景プロジェクトの要件により、各月の履歴在庫データをアーカイブしてバックアップする必要があり...

mysql5.7.21.zip インストールチュートリアル

mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...