Может ли этот эффект пикселизации быть достигнут с помощью raphael.js?

Question

Я хотел бы постепенно перерисовывать изображение на веб-странице и анимировать пикселирование как переход. Пикселизация начнется с использования небольших пикселей, и пиксели будут постепенно увеличиваться. Наконец, пикселизация будет отменена, а затем откроется второе изображение.

Я ищу эффект, подобный эффекту пикселя here - вам нужно выбрать пиксель в качестве перехода, а затем щелкнуть по изображению.

Да, я мог бы использовать эту библиотеку, но у меня уже есть полотно raphael, и мне интересно узнать, возможно ли (и как) это возможно.

Answer 1

Я думаю, что лучший вариант - использовать другую библиотеку для пикселизации (например, такую, которую вы связали, если вы не против лицензии). Raphael.js не поддерживает эти эффекты, поскольку это векторная библиотека. Вы можете преобразовать SVG Raphael.js в изображение и запустить эффекты на нем - см. this.

Примечание: Это не прямое решение вашей проблемы, но оно представляет собой еще одну альтернативу для достижения эффекта пикселизации (для других пользователей, которые ищут решение).

close-pixelate проект. Это сценарий, способный преобразовать изображение в пиксельную версию с использованием элемента холста HTML5 и лицензируется по лицензии MIT.

Страница проекта GitHub: here. Дополнительные примеры можно найти here.

Использование:

document.getElementById('portrait-image').closePixelate([ 
    { resolution : 24 }, 
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 } 
]); 

Answer 2

Рафаэль на самом деле не предназначен для работы с растровой графикой, это векторная библиотека. Реализуйте его в холсте.

Answer 3

Для Internet Explorer это действительно очень просто, так как пикселизация эффект поддерживается по умолчанию в качестве расширенного свойства CSS.

IE только CSS свойства для Пикселизация Effect:

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)"; 
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1); 

Для остальных браузеров, вы можете разработать свои собственные решения на основе кодов, как показано ниже:

http://phrogz.net/tmp/canvas_image_zoom.html