При подготовке изображений для WEB нередко появляется необходимость обрезать их, чтобы выделить нужные части изображения и отсечь ненадобные. Не считая чисто художественных суждений, такая обрезка либо, как ее еще именуют, кадрирование, нужна для уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и тем резвее оно загружается на WEB страничку.
Как удалить не нужные куски изображения
Поглядим, как производится кадрирование фактически, удалив неширокую черную полосу у нижнего края фото, которую не удалось в достаточной степени осветлить. Кадрирование производится особым инвентарем Crop Tool (С) (Инструмент «Рамка» (С)).
Нажмите кнопку Crop Tool (С) (Инструмент «Рамка» (С)) на панели инструментов (Tools), чтобы избрать этот инструмент.
Установите указатель мыши, который воспримет форму в левом верхнем углу изображения.
Нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши, переместите указатель мыши к нижней части правого края фото так, чтобы показавшаяся пунктирная рамка выделения не включала неширокую черную полосу у нижней границы изображения.
Отпустите левую кнопку мыши. Рамка зафиксируется, а в ее углах и серединах сторон появятся квадратные маркеры. Область изображения за пределами кадрирующей рамки будет затемнена, указывая, таким способом, отсекаемую часть фото.
При помощи этих маркеров можно выполнить настройку и поворот границы кадра. Для перемещения кадрирующей рамки довольно установить указатель мыши внутри выделенной области и перетащить ее в необходимое место. Чтобы поменять размер выделенной области, следует переместить один из угловых маркеров. Если при перемещении задерживать нажатой кнопку Shift, то будут сохранены пропорции области. Для поворота кадра следует установить указатель мыши, который воспримет форму изогнутой стрелки, за пределами области выделения и, перемещая мышь, достигнуть подходящего положения рамки. Чтобы отменить кадрирование, довольно надавить кнопку Esc.
Перемещая маркеры рамки выделения, добейтесь, чтобы кадрирующая рамка включала все изображение, не считая узенькой черной полосы у нижней границы фото.
Два раза щелкните мышью внутри кадрирующей рамки либо нажмите кнопку Enter. Фото будет обрезана по установленной границе.
Как уменьшить размер изображения
Но даже после обрезки фото довольно велика для WEB странички. При разрешении экрана 800 x 600 пикселов (а с таким разрешением по статистике в текущее время работает большая часть пользователей Web) фото занимает существенное место на дисплее. Не считая того, файл с изображением такового размера будет довольно велик по объему и будет длительно загружаться. Поэтому уменьшим размер изображения, что, в свою очередь, уменьшит объем файла.
Изберите команду меню Image - Image Size (Изображение - Размер изображения). На дисплее появится диалог Image Size (Размер изображения).
В высшей части диалога, в группе частей управления Pixel Dimensions (Размерность в пикселах) указан текущий размер файла в формате PSD - 400.3К, также текущие ширина (Width) и высота (Height) изображения в пикселах. У вас эти значения после кадрирования могут быть несколько другими.
В группе частей управления Document Size (Размер документа) указаны размеры документа в сантиметрах и его графическое разрешение (Resolution). При установленном флаге Constrain Proportions (Сохранить пропорции) программа автоматом сохраняет пропорции изображения при изменении одного из размеров - ширины либо высоты.
При изменении размеров изображения в группе частей управления Pixel Dimensions (Размерность в пикселах) соответственно меняются его свойства для документа - или его размеры, или графическое разрешение, зависимо от того, установлен либо сброшен флаг Resample Image (Поменять размер). Если этот флаг установлен, то меняется размер документа и, соответственно, объем файла с изображением. Если же флаг сброшен, то можно поменять только размеры документа. При всем этом, соответственно, будет изменяться его графическое разрешение, а размеры изображения в пикселах и объем файла останутся без конфигурации.
При уменьшении размерности либо графического разрешения Adobe Photoshop удаляет из изображения сверхизбыточную информацию, а при увеличении этих характеристик - сформировывает недостающую информацию на базе цветовых величин имеющихся пикселов. В обоих случаях программа употребляет один из 5 способов интерполяции, который можно избрать в открывающемся перечне Resample Image (Поменять размер).
Так как фото, размеры которой мы желаем поменять, создана для показа на дисплее, то изменять ее графическое разрешение не следует.
Удостоверьтесь, что установлен флаг Resample Image (Поменять размер), чтобы сохранить графическое разрешение изображения и поменять его размер.
В поле ввода Width (Ширина) группы частей управления Pixel Dimensions (Размерность в пикселах) введите новое значение ширины изображения в пикселах - 300. Автоматом поменяется значение высоты изображения в поле ввода Height (Высота), также размер документа в группе частей управления Document Size (Размер документа). В высшей части диалога вы увидите также новое, уменьшенное значение объема файла и рядом с ним, в скобках прежний объем.
Закройте диалог Image Size (Размер изображения), нажав кнопку ОК. Установленные характеристики будут использованы, и размер изображения в окне документа уменьшится.
Как избежать утраты свойства изображения при изменении его размера
Как уже указывалось, уменьшение размерности изображения удаляет из него сверхизбыточную информацию, что приводит к некому понижению резкости. Применение фильтра Unsharp Mask (Контурная резкость) может в известной степени вернуть резкость изображения.
Изберите команду меню Filter - Sharpen - Unsharp Mask (Фильтр - Резкость - Контурная резкость). На дисплее появится диалог Unsharp Mask (Контурная резкость).
Перемещая ползунковый регулятор Amount (Эффект), восстановите резкость фото. Значение этого параметра должно быть в границах 50-60%.
Нажатием кнопки OK закройте диалог Urisharp Mask (Контурная резкость). Резкость изображения усилится.
Сохраните документ, выбрав команду меню File - Save (Файл - Сохранить).
Потому что при изменении размеров изображения понижается его качество за счет удаления лишней информации, то, по способности, следует избегать этой операции. Если вы сканируете изображение, то лучше уже на этом шаге найти его размер и выполнить сканирование с таким разрешением, которое обеспечит лучшее качество отображения.
Практика реализации процесса адаптации изображений все еще находится в стадии развития. Существует большое количество идей и предложений как следует обрабатывать картинки.
В данном уроке мы рассмотрим небольшую очаровательную библиотеку, которая позволяет не только автоматически изменять размер изображений при изменении параметров окна просмотра, но также обрезать картинки, принимая во внимание заданную точку фокуса. К тому же, все действия осуществляются на чистом CSS.
Встречайте Focal Point
Focal Point - проект на GitHub и библиотека CSS? созданная Адамом Бредлеем (Adam Bradley). В соответствии с концепцией адаптивности изображения должны изменять размер и положение для достижения оптимальных пропорций для текущего окна просмотра. Focal Point продвигает данную идею дальше и не только изменяет размер изображений, но и обрезает их.
Проблема, которая возникает при реализации данной идеи, заключается в том, что произвольная обрезка может удалить важные части изображения! Например, на выше приведенном примере важный объект находится в правой части изображения. Как предотвратить его отсечение?
Focal Point позволяет задать целевую область изображения, которая должна оставаться целой (точка фокуса). Таким образом, когда библиотека будет выполнять обрезку, само изображений будет сохранять отличный вид.
Как это работает?
Реализация Focal Point достаточно уникальный, но в то же время простой процесс. Сначала обсудим, как выбирать точку фокуса, а затем погрузимся в код реализации.
Когда вы вставляете изображение в веб страницу с помощью Focal Point, оно автоматически разделяется на невидимую сетку с 12×12 ячеек. Нет разницы, какого размера картинка, сетка адаптируется под него.
Теперь у нас есть система разделения изображения и мы можем определить точку на сетке, которая будет служить точкой фокуса. При обрезке картинки заданная точка будет использоваться как центральная часть, вокруг которой происходит усечение. То есть, если мы выберем лицо мужчины, то данный важный аспект изображения останется после выполнения изменений.
Нужно найти важную область, затем подсчитать количество единиц сетки от центра изображения до нее. В нашем примере лицо находится на три единицы вправо и на три единицы вверх от центра сетки (на рисунке оставлены английские названия, так как они совпадают с рабочими параметрами библиотеки).
Код
Теперь мы можем указать точку фокуса и пришло время разобраться в коде реализации. Для начала загрузите проект с GitHub и привяжите CSS файл к вашему документу HTML.
После предварительных операций нужно добавить два элемента div и тег img . Да, разметка получается избыточной для одного изображения, и сей факт является минусом библиотеки. Вот типовая разметка:
Как вы можете заметить, внешний элемент div имеет класс “focal-point ”, а во внутреннем размещено наше изображение без каких либо классов.
Переводим единицы сетки в классы
Теперь надо указать Focal Point на место, где находится фокус изображения. Наша точка фокуса смещена на три единицы вправо и три единицы вверх. Поэтому указываем для внешнего элемента div классы “right-3 ″ и “up-3 ″.
Реализация нашего кода приведет к тому, что на больших экранах изображения будет выводиться в полный размер, а при уменьшении окна просмотра уменьшаться с обрезанием вокруг точки фокуса.
Обратите внимание, что изображение справа не только меньше, но и обрезано вокруг важной части. Все выполняется с помощью CSS!
Структура страницы
Для того, чтобы лучше представить, как использовать библиотеку в реальных приложениях, построим простую страницу.
Определим элемент div с классом “column ”:
Добавим заголовок и параграф для имитации содержания страницы:
Focal Point
Lorem ipsum....
Затем вставим изображение, как было показано в предыдущем примере (с двумя элементами div и классами для точки фокуса):
Focal Point
Lorem ipsum....
И для завершения примера скопируем код с использованием другого изображения и другой точки фокуса.
Focal Point
Lorem ipsum...
Focal Point
Lorem ipsum...
Для второго изображения точка фокуса находится в другом месте:
CSS
Определим стили для нашей страницы. Адаптация изображений и работа с точкой фокуса находятся вне зоны нашей деятельности. Все что нужно сделать - определить внешний вид элементов. Для примера страница делится на две колонки и задаются стили для текста.
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .column { float: left; overflow: auto; padding: 20px; width: 50%; } h1 { text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; } p { margin-bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; } @media all and (max-width: 767px) { p { font-size: 12px; } h1 { font-size: 35px; } } @media all and (max-width: 550px) { h1 { font-size: 23px; } }
Смотрим в действии
Теперь можно посмотреть как работает демонстрация. Если страницы выводится в большом окне просмотра (например, на экрана монитора настольного компьютера), то изображения будут выводиться в полном объеме:
Теперь, если уменьшить размер окна просмотра или смотреть демонстрационную страницу с мобильного устройства, то можно увидеть, как адаптируются изображения. По мере уменьшения окна изображения не только уменьшаются, но и обрезаются.
С точки зрения дизайна насколько эффективна такая техника!? Чем меньше изображение становится, тем сильнее выделяется точка фокуса. С помощью данной библиотеки можно быть уверенным, что даже на маленьких экранах пользователи будут важную информацию.
Совместимость с браузерами
Библиотека работает во всех новых браузерах. В IE8 изображения изменяют размер, но не обрезаются. Но на текущий момент 99.99% сайтов не имеют подобного механизма адаптации изображения с автоматической обрезкой, так что реакция IE8 не является критичной.
Что находится внутри?
Теперь рассмотрим, как работает библиотека.
Первая часть кода является базовым решением CSS для адаптивных изображений.
Focal-point { width: 100%; height: auto; overflow: hidden; } .focal-point img { width: 100%; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; } .focal-point div { position: relative; max-width: none; height: auto; }
Следующий код немного сложнее. Сначала медиа запрос реализуется в точке 767px. Затем, для обрезки изображения используются отрицательные значения полей для каждого из доступных классов. В тексте урока мы приводим только классы “up-3 ″ и “right-3 ″, которые использовались в демонстрации.
@media all and (max-width: 767px) { /* 4x3 Landscape Shape (Default) */ .focal-point div { margin: -3em -4em; } /* Landscape up (Total 6em) */ .up-3 div { margin-top: -1.5em; margin-bottom: -4.5em; } .right-3 div { margin-left: -6em; margin-right: -2em; } }
Здесь не так много кода, но он достаточно элегантен. Отрицательные поля используются с единицами em для обрезки изображений относительно заданной точки.
Часто появляется необходимость выводить изображения в блок фиксированного размера. В данном случае появляется проблема: как вписать картинку в блок без потери пропорции.
В большинстве блогов рекомендуют писать JavaScript код, который будет вычислять размеры картинки и масштабировать ее в нужный размер. Но это не наш метод. Привязка к js-коду не является хорошей идеей. К тому же до полной загрузки картинок скрипт будет бездействовать. Соответственно, страница некоторое время будет кривой.
Конечно, можно обрезать и масштабировать картинки до добавления их на сайт. но каждый раз запускать редактор и обрезать картинку по пикселям тоже не есть хорошо. Поэтому предлагаю воспользоваться привычным CSS, и обрезать картинку при помощи него. В данном случае, обрезка будет происходить по вертикали. То есть, по ширине картинка будет влезать полностью, а по высоте обрезаться.
Суть данного метода в том, что картинка будет вписана в блок определенных размеров. Все что не будет влезать в этот блок будет скрыто. Обрамляющий блок будет иметь те же самые свойства, что и картинка. Поэтому, его можно будет располагать и выравнивать так же, как и обычную картинку. Вариант, конечно, не идеальный, но действенный.
Для начала, подберем пациентов. Я вбрал картинки трех животных из семейства кошачих разных пропорций. Ширина у всех картинок одна - 200 пикселей.
высота = 198px
высота = 257px
высота = 124px
При такой разности пропорций картинок лучшим вариантом будет взять обрамляющий блок размером 200x120 пикселей.
После всех манипуляций с CSS выглядеть это будет так:
Код данного примера такой:
.jpg" width="200" alt="Картинка 1" border="0">
.jpg" width="200" alt="Картинка 2" border="0">
.jpg" width="200" alt="Картинка 3" border="0">
Как видите, картинки не исказились, а только обрезались. Хотя на самом деле остались полноразмерными. Этот метод будет очень удачным, если разность пропорций Ваших картинок невелика.
На этом все. Подписывайтесь, ставьте звездочки! Удачи в свершениях!
Не по теме . Самое-самое что есть на Земле.
Вы можете присоедениться к моему микроблогу в Твиттере
В этой статье мы научимся менять размеры и обрезать изображения с помощью элемента в HTML5, и пока мы этим занимаемся, давайте придадим элементам управления стильный дизайн, как в фоторедакторах.
В настоящее время многие сайты и веб-приложения владеют технологией обработки изображений. Это можно делать на серверной стороне, что повлечет за собой временные затраты на транспортировку потенциально большого изображения. Чтобы этого избежать, можно обрабатывать картинки на клиентской машине в целях ускорения процесса.
Мы будем выполнять это через canvas , рисуя изображения в нужном размере, затем получая новые изображения. Многие браузеры поддерживают этот метод, так что мы можем начать прямо сейчас, рассчитывая лишь на небольшие ограничения в производительности.
Форматирование больших изображений может замедлить браузер или вообще привести его к остановке. Это заставляет нас задуматься об установке лимитов на загружаемые изображения. Если качаство полученных изображений важно, то нас может удивить то, во что их превращает браузер. В интернете можно найти несколько технологий для улучшения качества обработки картинок , но мы не будем рассматривать их здесь.
С этой целью мы начинаем работу!
Разметка
В нашем демо мы будем работать с одним заданным изображением:
Все! Другого HTML нам не нужно.
CSS
CSS-код тоже будет не очень большим. Определим стили для resize-container и самого изображения.Resize-container { position: relative; display: inline-block; cursor: move; margin: 0 auto; } .resize-container img { display: block } .resize-container:hover img, .resize-container:active img { outline: 2px dashed rgba(222,60,80,.9); }
Теперь зададим позиции и стили для каждого ‘resize handles’. Это небольшие квадратики, находящиеся в углах изображений, которые мы перетаскиваем для изменения размеров картинки.
Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw { position: absolute; display: block; width: 10px; height: 10px; background: rgba(222,60,80,.9); z-index: 999; } .resize-handle-nw { top: -5px; left: -5px; cursor: nw-resize; } .resize-handle-sw { bottom: -5px; left: -5px; cursor: sw-resize; } .resize-handle-ne { top: -5px; right: -5px; cursor: ne-resize; } .resize-handle-se { bottom: -5px; right: -5px; cursor: se-resize; }
JavaScript
Начнем с создания переменной и полотна в Canvas.Var resizeableImage = function(image_target) { var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = {}, constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas"); }); resizeableImage($(".resize-image"));
Теперь создадим инициирующую функцию, которая будет запущена немедленно. Эта функция работает с контейнером, внутри которого расположено изображение, задает размер и копирует оригинал изображения для обрезки. Мы также присваиваем объект jQuery для того, чтобы сослаться на него позднее и задействовать операторы перемещения мыши для реагирования на перетаскивание кравдратиков.
Var resizeableImage = function(image_target) { // ... init = function(){ // Create a new image with a copy of the original src // When resizing, we will always use this original copy as the base orig_src.src=image_target.src; // Add resize handles $(image_target).wrap("
") .before("") .before("") .after("") .after(""); // Get a variable for the container $container = $(image_target).parent(".resize-container"); // Add events $container.on("mousedown", ".resize-handle", startResize); }; //... init(); }Функции startResize и endResize дают браузеру понять, когда нужно начать обращать внимание на перемещение мыши, и когда это следует прекратить.
StartResize = function(e){ e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize); }; endResize = function(e){ e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", resizing); };
Перед началом отслеживания мыши необходимо просканировать текущие параметры клиента при запросе страницы. мы храним их в переменной event_state и используем далее при работе.
SaveEventState = function(e){ // Save the initial event details and container state event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset().left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // This is a fix for mobile safari // For some reason it does not allow a direct copy of the touches property if(typeof e.originalEvent.touches !== "undefined"){ event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob){ event_state.touches[i] = {}; event_state.touches[i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; }); } event_state.evnt = e; }
Функция resizing - самая важная. Она активируется при растягивании изображения. Каждый раз мы вычисляем новые размеры изображения в зависимости от нового положения квадратиков.
Resizing = function(e){ var mouse={},width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; if(constrain || e.shiftKey){ height = width / orig_src.width * orig_src.height; } if(width > min_width && height > min_height && width < max_width && height < max_height){ resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }
Затем добавим опцию для ограничения размеров изображения с помощью клавиши Shift или переменной.
Обратите внимание : Так как мы реально изменяем изображение, а не просто задаем новую длину и высоту, то стоит подумать о допустимом количестве использования функции resizeImage для контроля над производительностью сервера.
Новые размеры изображения
Рисовать изображения в Canvas так же просто, как и drawImage . Мы задаем высоту и длину картинки, а затем предоставляем оригинал. Также используем toDataURL для получения Base64-encoded версии результата операции.Приведены все объяснения доступных для данной операции параметров.
ResizeImage = function(width, height){ resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, width, height); $(image_target).attr("src", resize_canvas.toDataURL("image/png")); };
Слишком просто? Есть одна оговорка: изображение должно быть размещено на одном домене с нашей страницей, либо на сервере должна быть активирована функция . Если это не так, то у Вас возникнут проблемы с ‘tainted canvas’.
Увеличение через другие вершины
Теперь у Вас должно быть работающее демо. Но оно еще не завершено. На данный момент мы можем растягивать изображение только через один угол, а хотим задействовать все четыре. Для этого нужно разобраться, как оно работает.
Когда мы растягиваем изображение, соседние к удерживаемому углу тоже должны двигаться, а вот противоположный конец картинки должен быть зафиксирован.
Мы можем поменять код так, чтобы при растягивании картинки за любой угол она менялась. Давайте обновим функцию resizing:
Resizing = function(e){ var mouse={},width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Position image differently depending on the corner dragged and constraints if($(event_state.evnt.target).hasClass("resize-handle-se")){ width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; } else if($(event_state.evnt.target).hasClass("resize-handle-sw")){ width = event_state.container_width - (mouse.x - event_state.container_left); height = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; } else if($(event_state.evnt.target).hasClass("resize-handle-nw")){ width = event_state.container_width - (mouse.x - event_state.container_left); height = event_state.container_height - (mouse.y - event_state.container_top); left = mouse.x; top = mouse.y; if(constrain || e.shiftKey){ top = mouse.y - ((width / orig_src.width * orig_src.height) - height); } } else if($(event_state.evnt.target).hasClass("resize-handle-ne")){ width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain || e.shiftKey){ top = mouse.y - ((width / orig_src.width * orig_src.height) - height); } } // Optionally maintain aspect ratio if(constrain || e.shiftKey){ height = width / orig_src.width * orig_src.height; } if(width > min_width && height > min_height && width < max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }
Теперь мы проверяем, какой из resize-handle был задействован, и применяем необходимые изменения.
Перемещение изображения
Теперь, когда мы можем менять размер картинки, Вы, наверное, заметили, что оно иногда "съезжает". Необходимо добавить возможность перемещения объекта в центр рамки. Давайте немного дополним нашу инициализирующую функцию.Init = function(){ //... $container.on("mousedown", "img", startMoving); }
Теперь мы добавляем функции startMoving и endMoving , похожие на startResize и endResize .
StartMoving = function(e){ e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", moving); $(document).on("mouseup", endMoving); }; endMoving = function(e){ e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", moving); };
В функции moving мы должны проработать позицию левого верхнего квадратика. Она должна быть равно начальной с небольшим смещением, вычисленным по перемещению других квадратов.
Moving = function(e){ var mouse={}; e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset({ "left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) }); };
Обрезка изображения
Теперь, когда мы научились менять размеры, надо добавить обрезку изображений. Вместо того, чтобы давать пользователям возможность мучаться с размерами обрезки, давайте просто создадим рамку, которую нужно поместить в нужное место, и вокруг которой все будет обрезано. Это даст им возможность подогнать изображение так, как захочется, и, в то же время, сделает получаемые изображения одинаковыми по размеру.Для этого нужно добавить такой HTML код:
Необходимо помнить, что рамка должна всегда быть отличного цвета от фона страницы, иначе могут возникнуть проблемы.
Overlay { position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; z-index: 999; width: 200px; height: 200px; border: solid 2px rgba(222,60,80,.9); box-sizing: content-box; pointer-events: none; } .overlay:after, .overlay:before { content: ""; position: absolute; display: block; width: 204px; height: 40px; border-left: dashed 2px rgba(222,60,80,.9); border-right: dashed 2px rgba(222,60,80,.9); } .overlay:before { top: 0; margin-left: -2px; margin-top: -40px; } .overlay:after { bottom: 0; margin-left: -2px; margin-bottom: -40px; } .overlay-inner:after, .overlay-inner:before { content: ""; position: absolute; display: block; width: 40px; height: 204px; border-top: dashed 2px rgba(222,60,80,.9); border-bottom: dashed 2px rgba(222,60,80,.9); } .overlay-inner:before { left: 0; margin-left: -40px; margin-top: -2px; } .overlay-inner:after { right: 0; margin-right: -40px; margin-top: -2px; } .btn-crop { position: absolute; vertical-align: bottom; right: 5px; bottom: 5px; padding: 6px 10px; z-index: 999; background-color: rgb(222,60,80); border: none; border-radius: 5px; color: #FFF; }
Также обновим JavaScript код:
Init = function(){ //... $(".js-crop").on("click", crop); }; crop = function(){ var crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height(); crop_canvas = document.createElement("canvas"); crop_canvas.width = width; crop_canvas.height = height; crop_canvas.getContext("2d").drawImage(image_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL("image/png")); }
Функция crop похожа на resizeImage . Различия лишь в том, что мы получаем размеры и позицию обрезки из положения рамки.
Для обрезки необходимо задать девять параметров оператора drawImage в canvas. Первый - исходное изображение. Следующие четыре - место, задействованное под операцию. Еще четыре - координаты места, в котором стоит начать рисование в canvas, и какого размера будет изображение.
Добавление прикосновений и распознавания жестов
Мы создали поддержку мышки. Давайте не будем обделять вниманием и мобильные устройства.Для mousedown и mouseup есть эквивалентные операторы - touchstart и touchend , а для mousemove есть touchmove . Нужно быть внимательным, чтобы не перепутать их с touchup и touchdown (А то будет смешно).
Давайте добавим touchstart и touchend везде, где у нас есть mousedown , и mouseup вместе с touchmove туда, где есть mousemove .
// In init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //In startResize() ... $(document).on("mousemove touchmove", moving); $(document).on("mouseup touchend", endMoving); //In endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", moving); //In startMoving()... $(document).on("mousemove touchmove", moving); $(document).on("mouseup touchend", endMoving); //In endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", moving);
Так как мы подключили мобильные устройства, то есть вероятность использования пользователем жеста "сжатия" пальцами изображения для его уменьшения. Есть одна очень удобная библиотека под названием Hammer, позволяющая распознавать множество жестов. Но, так как нам нужен только один, напишем его коротко без всяких дополнительных скриптов.
Вы, наверное, заметили, что функция saveEventState уже хранится в информации о прикосновениях. Теперь она нам пригодится.
Сначала мы проверяем наличие "двух прикосновений" и расстояние между ними. Также мы смотрим на то, уменьшается ли расстояние между ними по ходу движения. Теперь обновим moving:
Moving = function(e){ var mouse={}, touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset({ "left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) }); // Watch for pinch zoom gesture while moving if(event_state.touches && event_state.touches.length > 1 && touches.length > 1){ var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a; b = e.originalEvent.touches.clientY - touches.clientY; b = b * b; var dist2 = Math.sqrt(a + b); var ratio = dist2 /dist1; width = width * ratio; height = height * ratio; // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); } };
На основе этих данных мы уменьшаем или увеличиваем наше изображение и корректируем его высоту и длину.
На этом все. Вы можете открыть
Изображения существенно улучшают привлекательность интернет страниц, что в конечном итоге положительно сказывается на конверсии. Поэтому веб-мастера используют их не только внутри содержимого, но и при публикации анонса для записи. Ведь переход по ссылке с картинкой происходит намного чаще, чем по простой ссылке.
Раньше я при публикации записи на WordPress подготавливал несколько вариантов одной и той же картинки с разными размерами. Большие (оригинального размера) использовались для показа в галерее, средние в теле самой записи, а маленькие в качестве миниатюр (thumbnail).
Со временем, мне надоело это делать из-за временных затрат и ошибок, которые нет-нет, да возникали при ручном преобразовании. Кроме того у меня возникали сложности при смене дизайна сайта, когда требовались другие размеры для изображений. Поэтому я стал преобразовывать картинки «на лету» с помощью WordPress плагина Kama Thumbnail . Спасибо автору за этот отличный плагин!
В этой же статье я расскажу как с помощью только «голого» CSS без постороннего PHP или JavaScript кода изменить размеры выводимого на экран изображения. Забегая вперед скажу, что само оригинальное изображение не меняется, равно как и не создается куча мелких файлов с другими соотношениями сторон картинки, а все действия влияют лишь на то, что будет отображаться у посетителя сайта на экране. Ну это как надеть очки с красными линзами, когда несмотря на то, что будете видеть вы — небо по прежнему останется голубым, а трава зеленой.
Css-свойство object-fit
Это свойство определяет, как содержимое изменяемого элемента (например изображения) должно заполнить контейнер, когда высота и ширина контейнера отличаются от размеров самого изменяемого элемента. Здесь ключевое слово как .
Здесь проще всего показать все на примерах. Допустим у нас есть две картинки размерами 200х300 пикселей и 300х200 пикселей, а для миниатюр к постам мы хотим использовать изображение размером 200х200 пикселей. Разумно, чтобы первичные изображения полностью заполняли миниатюру с сохранением пропорций, а лишние части (сверху/снизу или слева/справа) отсекались.
Чтобы реализовать задуманное нужно использовать ключевое значение object-fit: cover; , при его использовании лишнее содержимое изображения обрезается, а итоговая картинка выравнивается по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
Как сжать и обрезать изображение на CSS
Для моего случая, чтобы преобразовать любые картинки с различными размерами и соотношением сторон к формату миниатюры 200х200 пикселей нужно использовать следующий CSS код:
Img.object-fit-cover { width: 200px; height: 200px; object-fit: cover; }
Сам вывод изображения может быть таким:
Другие значения object-fit для преобразования изображений
CSS свойство object-fit не ограничено приведенным выше примером, рекомендую ознакомиться со всеми его возможностями в списке использованных источников внизу статьи.
Достоинства и недостатки преобразования размеров изображений средствами одного CSS
Плюс в том, что не нужны плагины, коды и куча дополнительных изображений. Предложенный вариант преобразования не зависит от CMS и работает в абсолютном большинстве браузеров. Размеры получаемых изображений можно менять динамически, даже в пределах одной страницы и это не приведет к увеличению количества файлов изображений и занимаемого сайтом места.
К минусам стоит отнести то, что все преобразования производятся на стороне пользователя его браузером. И тут, в теории, можно получить несколько разный результат в зависимости от движка интернет обозревателя и операционной системы посетителя сайта.
Кроме того, если для миниатюры 100х100 пикселей использовать картинку формата FullHD 1920×1080, то сначала она полностью скачается на компьютер пользователя, а лишь затем браузер приведет ее к формату 100х100. Как вы понимаете размер таких изображений (1920×1080 и 100х100) может различаться в 10 раз, и это может замедлить работу сайта на слабых компьютерах и медленном интернете (например на телефонах и планшетах в сетях 2G/3G)!
На мой взгляд плюсы перевешивают минусы.
Благодарности
При написании статьи были использованы следующие источники.