jQuery плагин для ресайзинга и обрезки картинок на стороне браузера
То, что брузер умеет масштабировать любые картинки до нужного размера знают все, а как быть, если надо не просто изменить размер картинки (например, для превьюшки) но и обрезать картинку. Скажем, из прямоугольной фотографии получить квадратную обрезав ее по бокам. Вообще, это не шибко сложно решается одним только CSS с применением контейнера и отрицательных отступов картинки. Все сложнее, когда нужно обрезать таким образом множество картинок причем разных размеров и разными соотношениями сторон…
Хотя, тут можно сразу возразить, мол че извращаться, обрезай себе картинки на сервере и не парься. Да, но что, если наши картинки ссылаются на другие ресурсы, на тот же Вконтантик например, типа загружать их на сервер, там ресайзить и отдавать превьюшку? Можно конечно, но не оптимально по многим параметрам.
Так что представляю Вашему вниманию jQuery плагин, который решает поставленную задачу. Мы указываем плагину какие картинки надо обработать и до какого размера их нужно ужать и обрезать – далее всю работу делает он.
К примеру у меня на одном сайте есть система комментариев, авторизацией в ней происходит через соцсети, следовательно аватарки там могут стоять всякие разные, совершенно непредсказуемых размеров, которые если просто вписать в комментарии без обрезки выглядят ужасающе. Если же вырезать из них квадратную область (скажем, 70х70) то смотрится на порядок симпатичнее.
Работает это очень просто, примерно так:
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.squarecrop.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.avatar').squareCrop({ size:70 }); }); |
|
1 2 |
<img class="avatar" src="img1.jpg" alt="" /> <img class="avatar" src="img2.jpg" alt="" /> |
Как-то так будет выглядеть:
Скачать плагин c демкой на Github - https://github.com/redspirit/jquery.squareCrop
сентября 4, 2013 Среда at 11:00 пп
-
Валерий
Подписка
