Обрізати і змінити розмір зображень за допомогою цього простий плагін jQuery

Обрізка динамічного зображення легше, ніж будь-коли, завдяки таким бібліотекам, як jQuery. Кодова база проста у використанні, і спільнота має тисячі плагінів обробки зображень.

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

Цей проект є доступні на GitHub з деякими дуже Довга документація з десятками користувацьких функцій.

Cropper надає вам (розробнику) повний контроль над кожним аспектом інтерфейсу. Ви можете працювати 30 + різних варіантів і 20 + спеціальних методів вбудований у додаток Cropper.

Його повністю чутливий до дотику, тому він працює на всіх мобільних пристроях і підтримує колесо прокручування / трекпад для масштабування та вилучення фотографій. Користувачі можуть фліп, повернути, масштабу, і репозиція Фотографії будь-де на полотні перед обрізанням.

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

Пам'ятайте, що цей інструмент поставляється з багато функцій. Інтернет-документація може допомогти, але вам доведеться забруднити руки налаштування поля завантаження зображень самостійно дізнатися все це. Їх зразок коду просто виводить все на консоль і виглядає приблизно так:

 $ ('# image'). cropper (aspectRatio: 16/9, обрізка: функція (e) // Виведіть дані результату для обрізання зображення. console.log (ex); console.log (ey); log (e.width), console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Але, ви дійсно повинні поглянути на демо щоб побачити, як це все працює.

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

Ескізи в реальному часі оновлення в кутку, щоб зберегти кінцевий результат. Змінити співвідношення сторін, якість виводу, стандартна позиція обтинання, і ціла купа більше.