Обрезайте и изменяйте размер изображения с помощью этого простого плагина jQuery

Динамическое кадрирование изображений стало проще, чем когда-либо, благодаря библиотекам, таким как jQuery. Кодовая база проста в использовании, и у сообщества есть тысячи плагинов для обработки изображений.

Одним из таких плагинов является жнецбесплатное решение для обрезки изображений с открытым исходным кодом, которое обрабатывает масштабирование, обрезку и даже сохранение изображений.

Читайте также: шесть рекомендаций jQuery для повышения производительности

Этот проект доступен на GitHub с некоторыми очень длинная документация с десятками пользовательских функций.
Cropper дает вам (разработчику) полный контроль над каждым аспектом интерфейса. Вы можете работать с более чем 30 различными опциями и более чем 20 пользовательскими методами, встроенными в плагин Cropper.

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

Для плагина Cropper требуется копия jQuery, и он поставляется с двумя файлами: таблицей стилей CSS и библиотекой плагина JavaScript. Просто добавьте эти файлы на свою страницу, и все будет хорошо!

Помните, этот инструмент поставляется с много функций. электронная документация может помочь, но вам нужно запачкать руки, настраивая поле загрузки изображений самостоятельно, чтобы все это изучить. Их пример кода просто выводит все на консоль и выглядит примерно так:

$ ( ‘# Изображение’). Кадрирования ({
  Соотношение сторон: 16/9,
  Урожай: функция (е) {
    // Вывод данных результата для обрезки изображения.
    console.log (e.x);
    console.log (e.y);
    console.log (e.width);
    console.log (e.height);
    console.log (e.rotate);
    console.log (e.scaleX);
    console.log (e.scaleY);
  }
});

Но вы действительно должны взглянуть на живое демо чтобы увидеть, как все это работает.

Вы можете найти прямые выходные данные координат X / Y, а также размеры изображения в верхней части. Cropper также включает функцию загрузки, где пользователь может выбрать изображение со своего компьютера и начать обрезку прямо в браузере.

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

Читайте также: 5 бесплатных сценариев сравнения изображений