Red Spirit

Блог Алексея Таянчина

RSS 2.0

jQuery плагин для ресайзинга и обрезки картинок на стороне браузера

То, что брузер умеет масштабировать любые картинки до нужного размера знают все, а как быть, если надо не просто изменить размер картинки (например, для превьюшки) но и обрезать картинку. Скажем, из прямоугольной фотографии получить квадратную обрезав ее по бокам. Вообще, это не шибко сложно решается одним только CSS с применением контейнера и отрицательных отступов картинки. Все сложнее, когда нужно обрезать таким образом множество картинок причем разных размеров и разными соотношениями сторон…

Хотя, тут можно сразу возразить, мол че извращаться, обрезай себе картинки на сервере и не парься. Да, но что, если наши картинки ссылаются на другие ресурсы, на тот же Вконтантик например, типа загружать их на сервер, там ресайзить и отдавать превьюшку? Можно конечно, но не оптимально по многим параметрам.

Так что представляю Вашему вниманию jQuery плагин, который решает поставленную задачу. Мы указываем плагину какие картинки надо обработать и до какого размера их нужно ужать и обрезать – далее всю работу делает он.

К примеру у меня на одном сайте есть система комментариев, авторизацией в ней происходит через соцсети, следовательно аватарки там могут стоять всякие разные, совершенно непредсказуемых размеров, которые если просто вписать в комментарии без обрезки выглядят ужасающе. Если же вырезать из них квадратную область (скажем, 70х70) то смотрится на порядок симпатичнее.

Работает это очень просто, примерно так:

Как-то так будет выглядеть:

Типа аватарки

Скачать плагин c демкой на Github - https://github.com/redspirit/jquery.squareCrop

Categories: Мои проекты

  • Валерий

    Спасибо!