Question

所以我正在尝试使用HTML5画布编写图像过滤器，但在我能够做到之前，我需要能够在画布上绘制图像。我尝试了一些事情并最终找到许多消息来源说在设置图像源之前必须将image.crossOrigin属性设置为“匿名”。我尝试了这个并复制了一些显然适用于其他一些代码的代码，但仍无法使其工作。

此代码位于body标签的底部，从body的onclick属性调用draw。

代码：

<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.onload = function(){
        context.drawImage(img, 40, 40);
    }
    img.crossOrigin = "Anonymous";
    img.src = "field.jpg";
}
</script>

图片的链接是本地的，但我也尝试使用同一图片的保管箱链接，但都没有效果。

本地文件出错：

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

Dropbox出错：

Image from origin 'https://www.dropbox.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

谁能看到我做错了什么？

编辑：对于那些想要了解的人，我正在使用Chrome浏览器

由于跨源资源共享策略而在画布上显示图像的问题

0 个答案: