Question

我已从此http://www.storminthecastle.com/projects/imagefilters1/下载源代码。这是关于html5画布中的一些图像处理。

在源内部，它将加载位于本地目录中的图像......

function reset() {
    imageURL = "./sandbox.jpg";
    imageFilter = grayscale;
    document.querySelector("#filename").innerHTML = "";
    update();
  }

以上是在我的项目中工作。但我正在尝试从网址加载图片，因此我将其修改为以下内容...

function reset() {
    imageURL = "http://xxxxxx.jpg";
    imageFilter = grayscale;
    document.querySelector("#filename").innerHTML = "";
    update();
  }

测试时，图像正确显示。但是，所有功能都不再适用，我不知道为什么。我不知道为什么它不能将url作为参数，我不知道如何修改它以使其工作。有帮助吗？

Answer 1

感谢您提供的链接。我进一步阅读了COR问题，并设法找到要添加的编码行。

img.crossOrigin = '';
//img domain different from app domain
img.src = 'http://xxx.jpg';

只需设置图像的crossOrigin属性即可使其正常工作。基本上，这将允许跨域图像进行操作。没有它，任何跨域都将被阻止，您将获得安全性异常。非常感谢帮助！：）

要添加，我只使用Chrome测试并且正在使用。

带有画布的html5图像过滤器

1 个答案: