Question

目前正在为我的编码训练营开展项目。我试图在熊的图像上叠加绑带，我试图用帆布检查他们点击的区域的颜色，以确保他们不在实际图像周围的白色空间上放置绑带。

正如您所见，我试图通过在Dropbox上托管图像然后使用匿名交叉源的原始链接来解决我原来的污染错误。我的导师告诉我试试这个。但是现在我在将图像绘制到画布上时出现错误。它说：

“来自'https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1'的重定向已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头。因此不允许原点'null'访问。”< / p>

有人可以帮我解决一个简单的解决方案吗？

这是我的HTML：

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

相关JavaScript：

{{1}}

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

Answer 2

您可以尝试在图片上设置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之类的图片库中，并相应地设置Access-Control-Allow-Origin标题。

将图像绘制到画布上时如何避免CORS错误？

2 个答案: