在畫布上繪製圖像時如何避免CORS錯誤？

Question

目前正在爲我的編碼訓練營項目工作。我試圖在熊的圖像上疊加bandaids，我試圖用畫布檢查他們點擊的區域的顏色，以確保它們不會在實際圖像周圍的白色空間上放置bandaids。

正如你所看到的，我試圖通過在Dropbox上託管圖像，然後使用跨源匿名原始鏈接來解決我的原始污染錯誤。我的老師告訴我試試這個。但是現在，在將圖像繪製到畫布上時出現錯誤。它說：

「來自'https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1'的重定向已被CORS策略阻止：No'Access-Control-Allow-Origin'標頭存在於請求的資源中，因此不允許Origin'null'訪問。

有人可以幫我解決一個簡單的解決方案嗎？

這裏是我的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

我找到了一個解決方案，但不確定它是否適用於所有相關的問題，並沒有真正瞭解它的工作原理。

只需將www.dropbox.com更改爲您網址中的dl.dropboxusercontent.com。

在這裏找到：

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