javascript - Pixastic 对我来说不能正常工作，为什么？

Question

我需要在网页上进行一些交互式图像处理。我找到了 pixastic这似乎很适合这份工作。

关于 this page我正在尝试模糊图像，但我只能让“blurfast”起作用。 “模糊”对我不起作用。

我一直在环顾四周并阅读文档，但看不出它失败的原因。有人知道吗？

我用这个js:

$(function(){
    var img = document.getElementById("imageone");

    $("#blurfastbutton").click(function() {
        Pixastic.process(img, "blurfast", {amount:0.2});
    });

    $("#blurbutton").click(function() {
        Pixastic.process(img, "blur");
    });
});

Answer 1

对于许多操作，Pixastic 必须交换 <img>带有 <canvas> 的元素元素并执行逐像素调整。使用 "blur" 操作图像时抛出安全异常，因为图像源驻留在文档的不同域中。

You should also be aware that, due to security restrictions in the canvas element, Pixastic will only work with images that reside on the same host as the page you're using it on. [source]

"blurfast" 没有发生这种情况的原因是因为它的工作方式不同:一遍又一遍地以非常小的量调整图像的大小。显然，这并没有违反 security policies的 <canvas>元素。

最好的方法是坚持 "blurfast" ——毕竟它更快、更动态。如果你真的想用"blur"那么您必须确保所有图像都与当前文档位于同一域中。