イメージをキャンバスに描画する際にCORSエラーを回避する方法は？

Question

現在私のブートキャンプのコーディングのためのプロジェクトに取り組んでいます。私はクマのイメージにバンデイズを重ねようとしています。実際のイメージの周りの空白にバンデイズを置かないようにするために、キャンバスをクリックしてその領域の色をチェックしようとしています。

ご覧のとおり、Dropboxでイメージをホストしてから匿名のクロスソースを使用して元の汚染エラーを解決しようとしました。私のインストラクターはこれを試してみるように言った。しかし、キャンバスに画像を描画する際にエラーが発生するようになりました。それは言う：

"リダイレクト 'https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1'は、CORSポリシーでブロックされました：いいえ 'Access-Control-Allow-Origin'ヘッダーが要求されたリソースに存在します。

誰かが簡単な解決方法を教えてくれますか？ここで

は私のHTMLです：

<script src="https://code.jquery.com/jquery.js"></script> 

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script> 

<script type="text/javascript" src="assets/js/app.js"></script> 

<canvas id="canvas" width="1331" height="941">Helllo</canvas> 

<img src="https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1" onload="draw()" style="display: none" id="theBear" crossorigin="anonymous"> 

<img src="assets/images/bandaids/001-medical-3.png" class="bandAids"> 

<link rel="stylesheet" type="text/css" href="assets/css/style.css"> 

関連するJavaScript：

function draw() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var img = document.getElementById("theBear"); 
    ctx.drawImage(img,0,0); 
    console.log("drew image"); 
}; 

$(document).on("click","#canvas", function(event) { 
    var c = this.getContext('2d'); 
    var p = c.getImageData(event.pageX, event.pageY, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
    console.log(hex); 
    database.ref().child("bandAids").push({ 
    xCord: event.pageX, 
    yCord: event.pageY, 
    bandAid: myBandAid, 
    }) 
    console.log(event); 
}) 

Answer 1

あなたが画像上crossOrigin属性を設定してみてください：

function loadImage(src, cb) { 
    var image = new Image(); 
    image.onload = function() { 
     cb(this); 
    } 
    image.crossOrigin = 'Anonymous'; 
    image.src = src; 
} 

...

var img = document.getElementById("theBear"); 
loadImage(img.src, function(image) { 
    ctx.drawImage(image,0,0); 
} 

あなたがあなた自身のウェブサーバやimgurなどのimagehoster上の画像をホストし、それに応じてAccess-Control-Allow-Originヘッダを設定する必要が働いていない場合。

Answer 2

私は解決策を見つけましたが、それが関連するすべての問題に適用されているのかどうかは不明ですが、実際にそれがなぜ機能するのかは分かりません。

URLにwww.dropbox.comをdl.dropboxusercontent.comに変更してください。ここで見つける

：

https://www.dropboxforum.com/t5/API-support/CORS-issue-when-trying-to-download-shared-file/td-p/82466