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" 操作图像时会引发安全异常，因为图像源与文档位于不同的域中。

您还应该注意，由于画布元素中的安​​全限制，Pixastic 只能处理与您使用它的页面位于同一主机上的图像。 [source]

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

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