html5图像滤镜与画布

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

里面的来源，它会加载位于本地目录中的图片...

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为参数，我不知道如何修改它以使其工作。任何帮助？

来源

2013-09-27 Sky

[浏览器Canvas CORS支持跨域加载的图像处理]的可能重复（http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation ）。如果加载图像触发CORS，则只能显示图像，但不能更改，设置或获取某些滤镜所需的像素。 – K3N

从另一个来源加载图像时，必须先将图像绘制到画布上，然后更改像素，应用滤镜.. 有一个名为[Lomo +]的Chrome扩展程序（https://chrome.google.com/webstore/detail/lomo +/mihmjgdafbdggpgjfaeinppnlnpgelnj？hl = en）你应该看到它的来源 –

你好，从链接，它提到它正在Chrome和Firefox的权利？我使用的是Chrome，但它不起作用。我是否错过了一些编码以使其工作？在编码中，有'context.drawImage（image，0，0，canvas.width，canvas.height）;'所以我猜它已经被绘制到画布中了？至于变化像素和应用滤镜，我对它并不熟悉，也没有线索去做。我会看看LOMO。 – Sky

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

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

只需设置图像的crossOrigin属性以使其工作。基本上，这将允许跨域图像进行操作。没有它，任何跨域将被阻止，你会得到安全例外。真的非常感谢您的帮助！ :)

要添加，我只测试使用Chrome和工作。

来源

2013-09-28 19:29:31 Sky

html5图像滤镜与画布

回答

相关问题