Cropper

На данный момент существует v4.0 beta этого плагина и он является одним из самых лучших JS-скриптов для обрезки изображений в вебе. Он полностью зависит от jQuery, однако существует версия, которая работает и без нее.

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

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

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

Cropper - просто отличный плагин.

Croppie

Другой вполне рабочий инструмент – Croppie. Он создан на «чистом» JS (vanilla JS) и не требует подключения jQuery или других библиотек. Хороший вариант для разработчиков-минималистов.

Если вы хотите работать с ним с помощью пакетных менеджеров, то он поддерживает npm и Bower. Также вы можете скачать его прямо с gitHub, если так вам нравится больше.

С помощью Croppie вы просто выбираете элемент, который будет окном обрезки и определяете изображение (его можно обновлять динамически). Инструмент работает на «чистом» JS, поэтому я надеюсь, что ваши знания классического JavaScript все еще свежи.

Внутри функции Croppie() есть множество опций для кастомизации, возможность использования функций обратного вызова и многое другое.

jQuery Guillotine

Неизвестно чего ждать от плагина с названием «Гильотина». На самом деле – это просто инструмент для JS обрезки изображений. Хотя в нем есть некоторые «продвинутые» функции. Например, вы можете добавить функцию масштабирования в интерфейс инструмента, чтобы позволить пользователям рассмотреть свои изображения перед обрезкой.

Также в jQuery Guillotine есть замечательный интерфейс для перетаскивания (drag’n’drop), который позволяет позиционировать изображение именно так, как нужно.

Естественно, этот инструмент – бесплатный, а сам код плагина довольно «легкий» - всего 3 Кб.

Имейте в виду, что для работы этого плагина требуется jQuery и если вы ищете что-то на «чистом» JavaScript, этот инструмент вам не подойдет.

Croppic

Плагин с «умным» именем Croppic – еще один инструмент, независимый от jQuery.

С его помощью можно реализовать все основные операции с изображениями: обрезку, перемещение, масштабирование и т.п.

Он выделяется своими многочисленными дополнительными функциями, одна из которых – автоматическая загрузка изображений прямо из вашего браузера. Для работы этой функции требуется веб-сервер и скрипт предпочтительно на языке PHP. Если вы посетите официальную страницу плагина и зайдете в раздел «Документация», то там вы обнаружите описание метода uploadData. Это замечательный метод позволяет загрузить изображением через AJAX. Нельзя сказать, что другие плагины для обрезки изображений jQuery не имеют подобного функционала, но Croppic легче пользоваться, так как его у него довольно много настроек.

Плюсом этого инструмента является то, что вы можете найти бесплатные PHP скрипты, который будут работать совместно с Croppic. Разве это не замечательно?

React Drop n Crop

React.js есть за что любить. Он быстро становится основным продуктом для создания динамических веб-приложений на JavaScript.

React Drop and Crop – это набор из 2 скриптов. Он использует библиотеку dropzone для загрузки изображения и компонент React Cropper для осуществления его обрезки.

Вы можете ознакомиться с демо-страницей, если вам интересно, как это работает в браузере. Демонстрация возможностей - динамична, поэтому вы можете следить за каждым действием в реальном времени.

Если вы разработчик на React, то React Drop n Crop – это один из скриптов, о котором вы обязательно должны знать.

Tinycrop

Название Tinycrop хорошо отражает предназначение инструмента.

Разработан на «чистом» JavaScript и содержит основные функции, которые вы найдете в больших библиотеках. Но это не означает, что Tinycrop не сможет справиться с обрезкой изображений. Напротив, это идеальный выбор для разработчиков, работающих с «тяжелыми» страницами и медленными HTTP-запросами.

На странице плагина на gitHub вы найдете указания по установке с примерами кода по каждой опции Tinycrop.

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

Jcrop

Плагин Jcrop уже довольно давно является одним из топовых jQuery-инструментов для обрезки изображений в Интернете. Однако, на данный момент - его поддержка и обновление прекратились. За последние нескольких лет в репозитории не было серьезных обновлений, то же самое можно сказать и о демонстрационной странице.

Тем не менее, этот скрипт работает очень хорошо для обработки загрузки изображений совместно с PHP. Большинство веб-разработчиков используют PHP, так как его легко освоить и он работает на большинстве основных веб-серверов, не говоря уже о том, что на нем разработаны все популярные CMS, одной из которых является WordPress.

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

Smartcrop.js

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

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

Это довольно успешное решение, если мы говорим о скриптах с простым интерфейсом. Взгляните на демо-страницу, чтобы узнать как работает плагин. На ней вы увидите оригинальное фото, затем вариант обрезки на основе алгоритма Smartcrop и возможный результат после обрезки.

Это может показаться очень сложным, но вам не придется писать много кода. Все, что будет нужно сделать - это установить скрипт, добавить функцию, которая будет срабатывать на странице и загрузить несколько изображений.

Smartcrop.js - первый «умный» плагин, который я видел, и это один адский скрипт.

Оригинал статьи: https://www.webdesignerdepot.com/2018/05/8-free-javascript-image-cropping-scripts-and-plugins/

Перевод: Земсков Матвей