Pixastic не работает должным образом для меня, почему?

Question

Мне нужно сделать интерактивную обработку изображений на веб-странице. Я нашел pixastic, и это казалось хорошим для работы.

На этой странице я пытаюсь сделать размытие изображения, но я могу только заставить работать "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"потому что источник изображения находится в другом домене документа.

Вы также должны знать, что из-за ограничений безопасности в элементе canvas Pixastic будет работать только с изображениями, которые находятся на том же хосте, что и страница, на которой вы его используете. [источник]

Причина, по которой это не происходит с "blurfast" потому что это работает по-другому: изменение размера изображения снова и снова на очень небольшие суммы. Это, по-видимому, не нарушает политики безопасности <canvas> элемент.

Лучший подход - придерживаться "blurfast" - это быстрее и динамичнее, в конце концов. Если вы действительно хотите использовать "blur" тогда вам нужно убедиться, что все изображения находятся в том же домене, что и текущий документ.