带有画布的html5图像过滤器

Question

我已经从http://www.storminthecastle.com/projects/imagefilters1/下载了源代码。 它是关于html5 canvas中的某些图像处理。

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

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

以上是我的项目。 但是我试图从URL加载图像，所以我将其修改为以下内容...

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进行过测试，并且可以正常使用。