При загрузке картинок на сайт, нужно их правильно масштабировать и отображать на сайте. Картинки могут быть прямоугольные, квадратные, большие, маленькие, картинки может вообще не быть (стандартная картинка) или отсутствовать физически. И каждую ситуацию нужно учесть и рассмотреть.
Для начала, хочется отметить то, что ни в коем случае не стоит хранить оригинальные изначальные картинки, которые загружает пользователь (какими бы они не были - небольшие аватарки, маленькие иконки или большие фотоальбомы), в них может храниться лишняя (EXIF например, или скрытые архивы внутри файлов), их лучше сразу сразу же ресайзить под нужные рамки и сжимать на сервере.
Далее. Например какая-нибудь картинка, пусть даже картинка к новости, которая выводится в списке новостей на сайте. В общем списке новостей эта картинка попадает в какие-то рамки (квадратная, прямоугольные, полукруглые), но всё равно рамки. Или аватарки пользователя, которые он себе загружает. Тут правила строже. В профиле пользователя аватарка должна выводится в строго отведённом дизайном для этого месте, чаще всего в квадратной рамке. А саму фотографию пользователь может загрузить квадратную (самый идеальный вариант - тогда даже средствами браузера(sic!) можно будет изменять картинку) или прямоугольную (например с фотоаппарата) или вообще, издеваясь, загрузить длинную прямоугольную картинку (вертикальную, горизонтальную, пофик).
Но есть одно хитрое решение, которое применил у себя Вконтакте - оно заключается в том, что после заливки своей картинки на аватару, ты (с помощью браузера) выбираешь маленький прямоугольник, который отображать в качестве своей аватарки. Это решение содержит много достоинств. Одно из них это то, что пользователь сам выбирает лучшую (т.е. наиболее подходящую) для аватарки часть изображения, например лицо или какую-то запоминающуюся часть. А второе, и главное, то - что размер нужного выбираемого прямоугольника можно задать самому. Реализуется оно примерно так:
1. Загружается картинка на сервер (желательно асинхронно, через ajax, а не после отправки формы)
2. В браузере подключается area select - jQuery плагин, который реализует выбор области из картинки, ему задаются параметры, такие как загруженное на сервер пользовательское изображение и размеры рамки, которую нужно сделать.
3. Пользователь "вырезает" нужный участок и при сохранении формы, на сервер передаются координаты точек рамки.
4. Далее серверная часть принимает координаты, сжимает и кропает картинку в соответствии с нужными пропорциями.
5. PROFIT!!! У нас готов user content нужного размера для отображения у себя на сайте.
Комментариев нет:
Отправить комментарий