Можно ли достичь этого эффекта пикселизации с помощью raphael.js? - PullRequest
Новая
       0

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

2 голосов
/ 16 ноября 2011

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

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

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

Ответы [ 3 ]

2 голосов
/ 01 декабря 2011

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

1 голос
/ 04 декабря 2011

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

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

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

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

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

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);
0 голосов
/ 06 декабря 2011

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

IE Только CSS-свойства для эффекта Pixelate: 

-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

...