クロスオリジン画像リソース権限(CORS 対応画像)

クロスオリジン画像リソース権限(CORS 対応画像)

HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 CORS を設定することで、img 画像を他のサイトから読み込み、現在のサイト (現在のオリジン) から直接ダウンロードしたかのようにキャンバスで使用できるようになります。

crossorigin 属性の使用の詳細については、CORS 設定属性を参照してください。

「汚染された」キャンバスとは何ですか?

CORS 認証なしでキャンバス内の画像を使用することは可能ですが、そうするとキャンバスが汚染されます。 キャンバスが汚染されると、キャンバスからデータを抽出できなくなります。つまり、toBlob()、toDataURL()、getImageData() などのメソッドを呼び出すことができなくなり、セキュリティ エラーがスローされます。

これは実際には、ユーザーの個人情報を保護し、プライバシー漏洩の原因となるリモート Web サイトからユーザーの画像情報が許可なく読み込まれるのを防ぐためです。

(訳者注:ユーザーがQQなどのソーシャルネットワーキングサイトにログインしている場合、保護されていない場合、特定のWebサイトを開いた後、Webサイトがキャンバスを使用してユーザーの画像情報を取得してアップロードし、漏洩が発生する可能性があります。)

例: 他のサイトから画像を保存する

まず、イメージ サーバーは対応するAccess-Control-Allow-Origin応答ヘッダーを設定する必要があります。リクエスト ヘッダーに img 要素の crossOrigin 属性を追加します。たとえば、Apache サーバーの場合、HTML5 Boilerplate Apache サーバー構成内の構成情報をコピーして応答できます。

<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;
}

ブラウザの互換性

デスクトップ

特徴クロムFirefox (ヤモリ)インターネットエクスプローラーオペラサファリ
基本サポート13 8サポートなしサポートなし?

携帯

特徴アンドロイドFirefox モバイル (Gecko) IEモバイルOpera モバイルSafariモバイル
基本サポート? ? ? ? ?

参照

Chrome: WebGL でクロスオリジン画像を使用する

HTML 仕様 - crossorigin 属性

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

<<:  JavaScript のスプレッド演算子とレスト演算子の違いの詳細な説明

>>:  Quill エディタでカスタム HTML レコードを挿入する詳細な例

推薦する

要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...

mysql57サービスが突然消えた問題をすぐに解決する

1つ、 G:\MySQL\MySQL Server 5.7\bin> mysqld --ini...

Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

Vue3.0はvue-grid-layoutプラグインを使用してドラッグレイアウトを実装します。

目次1. プラグイン2. 幕間3. 実装4. 検証機能1. プラグインまず、私たちが選んだプラグイン...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

JavascriptとDOMの関係は非常に曖昧で、CSSやHTMLのフロントエンド技術層も理解してい...

MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要

クエリキャッシュ1. クエリキャッシュの動作原理クエリ ステートメントを実行する前に、MySQL は...

ドロップダウンメニューとスライドメニューのデザイン例

ドロップダウン メニューやスライド メニューを使用している Web サイトをたくさん見つけたので、私...

Nginx リバース プロキシ springboot jar パッケージ プロセス分析

Springboot プロジェクトをサーバーにデプロイする方法としては、war パッケージにパッケー...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...