javascript - 在 Canvas 上绘制图像时如何避免 CORS 错误？

Question

目前正在为我的编码训练营开发一个项目。我正在尝试将创可贴覆盖在熊的图像上，并尝试使用 Canvas 来检查他们单击的区域的颜色，以确保他们不会将创可贴放在实际图像周围的空白区域上。

如您所见，我尝试通过将图像托管在保管箱上，然后使用具有跨源匿名的原始链接来解决原始污染错误。我的导师告诉我尝试这个。但是现在我在将图像绘制到 Canvas 上时遇到错误。它说:

“来自“https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1”的重定向已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问源“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

我找到了一个解决方案，但不确定它是否适用于所有相关问题，并且不太明白它为什么有效。

只需将网址中的 www.dropbox.com 更改为 dl.dropboxusercontent.com 即可。

在这里找到:

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