HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 CORS を設定することで、img 画像を他のサイトから読み込み、現在のサイト (現在のオリジン) から直接ダウンロードしたかのようにキャンバスで使用できるようになります。 crossorigin 属性の使用の詳細については、CORS 設定属性を参照してください。 「汚染された」キャンバスとは何ですか? CORS 認証なしでキャンバス内の画像を使用することは可能ですが、そうするとキャンバスが汚染されます。 キャンバスが汚染されると、キャンバスからデータを抽出できなくなります。つまり、toBlob()、toDataURL()、getImageData() などのメソッドを呼び出すことができなくなり、セキュリティ エラーがスローされます。 これは実際には、ユーザーの個人情報を保護し、プライバシー漏洩の原因となるリモート Web サイトからユーザーの画像情報が許可なく読み込まれるのを防ぐためです。
例: 他のサイトから画像を保存する まず、イメージ サーバーは対応する <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"> SetEnvIf オリジン ":" IS_CORS ヘッダー設定 Access-Control-Allow-Origin "*" env=IS_CORS </ファイル一致> </モジュール> </モジュール> これらの設定を有効にすると、独自のリソースと同様に、他のサイトの画像を DOM ストレージ (または他の場所) に保存できます。 var img = 新しい画像、 キャンバス = document.createElement("キャンバス"), ctx = キャンバス.getContext("2d")、 src = "http://example.com/image"; // 特定の画像アドレス img.crossOrigin = "Anonymous"; img.onload = 関数() { キャンバスの幅 = img の幅; キャンバスの高さ = img.height; ctx.drawImage(画像, 0, 0); localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); } src = src; // キャッシュされた画像もロードイベントをトリガーするようにします if ( img.complete || img.complete === undefined ) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; src = src; } ブラウザの互換性 デスクトップ
携帯
参照 Chrome: WebGL でクロスオリジン画像を使用する HTML 仕様 - crossorigin 属性 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: JavaScript のスプレッド演算子とレスト演算子の違いの詳細な説明
>>: Quill エディタでカスタム HTML レコードを挿入する詳細な例
CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...
キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...
最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...
1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...
目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...
システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...
実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...
目次1. プラグイン2. 幕間3. 実装4. 検証機能1. プラグインまず、私たちが選んだプラグイン...
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
JavascriptとDOMの関係は非常に曖昧で、CSSやHTMLのフロントエンド技術層も理解してい...
クエリキャッシュ1. クエリキャッシュの動作原理クエリ ステートメントを実行する前に、MySQL は...
ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...
Springboot プロジェクトをサーバーにデプロイする方法としては、war パッケージにパッケー...
MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...
とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...