ホームページ >ウェブフロントエンド >H5 チュートリアル >キャンバス上に描画するときに発生するクロスドメインの問題を解決する方法
キャンバス上に描画するときに発生するクロスドメインの問題を解決する方法
- 不言オリジナル
- 2018-06-14 11:25:334017ブラウズ
この記事は主に、キャンバス描画時に発生するクロスドメインの問題を詳細に説明する関連情報を紹介します。内容は非常に優れているので、参考として共有します。
キャンバスに外部リンク画像を描画すると、クロスドメインの問題が発生します。
例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>crossorigin</title>
</head>
<body>
<canvas width="600" height="300" id="canvas"></canvas>
<img id="image" alt="">
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
document.getElementById('image').src = canvas.toDataURL('image/png');
};
image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
ブラウザでこのページを開くと、次の問題が見つかります:
Uncaught DOMException: 'HTMLCanvasElement' で 'toDataURL' の実行に失敗しました: 汚染されたキャンバスが存在する可能性がありますエクスポートできません。
これは CORS ポリシーによって制限されており、クロスドメインの問題が発生します。画像を使用することはできますが、キャンバスが汚染されると、キャンバスのデータが汚染されます。たとえば、Canvas toBlob()、toDataURL()、または getImageData() メソッドを使用すると、上記のセキュリティ エラーがスローされます
これは厄介な問題ですが、幸いなことに img Crossorigin 属性が追加されました。この属性は、画像取得プロセス中に CORS 機能を有効にするかどうかを決定します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>crossorigin</title>
</head>
<body>
<canvas width="600" height="300" id="canvas"></canvas>
<img id="image" alt="">
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.setAttribute('crossorigin', 'anonymous');
image.onload = function() {
ctx.drawImage(image, 0, 0);
document.getElementById('image').src = canvas.toDataURL('image/png');
};
image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
上記 2 つの JS コードを比較すると、次の余分な行が見つかります:
image.setAttribute('crossorigin', 'anonymous');
とてもシンプルで、完璧な解決策です!
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
以上がキャンバス上に描画するときに発生するクロスドメインの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。