Формирование непрямоугольных областей из JPEG изображений

При разработке веб-проектов часто возникает ситуация, когда нужно взять изображение и вырезать из него нестандартную форму. Обычно, когда разработчик сталкивается с такой задачей, решение заключается в следующих действиях: открыть изображение в любимом редакторе графики, с помощью инструмента выделения вырезать нужную форму и сохранить результат в формате PNG, так как только в данном формате изображений веб браузеры поддерживают альфа канал. Проблема заключается в том, что изображения в формате PNG даже в сжатом виде никогда не получаются меньше, чем в формате JPEG, если источником были фотографии. Следовательно, время загрузки может увеличиться до неприемлемых величин при наличии большого количества картинок на странице.

polyClip.js является небольшой библиотекой, которая использует элемент HTML5 canvas для вырезания части изображения JPEG. Библиотека поддерживает старые версии IE (7-8) с помощью бибилотеки JavaScript Excanvas, которая  работает с элементом canvas с помощью VML.

Как использовать

  • Загружаем скрипт (пакет содержит jQuery 1.6.4 и excanvas 3).
  • Включаем файлы в секцию head документа:
  <script src="/path/to/js/jquery-1.6.2.min.js"></script>

  <!--[if lt IE 9 ]>
   <script src="/path/to/js/excanvas/excanvas.compiled.js"></script>
  <![endif]-->

  <script src="/path/to/js/polyClip-p.js"></script>
  • Создаем содержание страницы, но все изображения, которые будут обрезаться нужно поместить в контейнер div с классом clipParent. Скрипт удалит в контейнере тег изображения и заменит его элементом canvas .
<div class="clipParent">
  <img src="images/image.jpg" />
</div>
  • Для каждого обрезаемого изображения нужно вычислить узловые точки маски и задать в атрибуте data-polyclip (через запятую). Для вычисления координат маски можно воспользоваться графическим редактором или генератором маски (в том числе и онлайновым, например, image-maps.com).

Пример вычисления координат

<img src="image.jpg" data-polyclip="487, 4, 500, 239, 19, 239, 43, 195" />

 

Зачем использовать?

Размер обрезанного варианта картинки в формате PNG может отличаться в большую сторону от целого изображения в формате JPEG в несколько раз. При использовании на странице большого количества такой графики может получиться существенная экономия трафика и времени загрузки.

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 27 Января 2012 00:40
    sigrosigro
    то что надо..спасибо
  • 30 Января 2012 03:07
    evgen_ko
    Большое спасибо, пригодится ))
  • 14 Февраля 2012 14:24
    NeOL
    Спасибо. Мне он как раз то, что нужно
  • 11 Мая 2013 20:48
    dee3000
    Ничего не виходит
  • 14 Октября 2015 10:58
    awerty
    Большое спасибо. Попробую использовать
  • 20 Марта 2016 10:36
    kalisto
    Отличная подборка скриптов у вас на сайте, я давно ее не просматривала, а сейчас прямо таки восхищаюсь!!! Спасибо Вам огромное!!!
^ Наверх ^