Изрязване и преоразмеряване на изображения с този прост плъгин jQuery

Изрязване на динамично изображение е по-лесно от всякога благодарение на библиотеки като jQuery. Кодовата база е лесна за използване и общността има хиляди плъгини за обработка на изображения.

Един такъв плъгин е косач, безплатно решение за отглеждане на изображения с отворен код, което обработва мащабиране, изрязване, и дори запаметяване на изображения.

Този проект е на разположение в GitHub с някои много дълга документация с десетки персонализирани функции.

Cropper ви дава пълен контрол над всеки аспект на интерфейса. Можете да работите 30+ различни опции и 20+ персонализирани методи вграден в приставката Cropper.

е чувствителен на допир, така че работи на всички мобилни устройства и поддържа колелцето за превъртане / тракпад за увеличаване и намаляване на снимките. Потребителите могат флип, въртя, мащаб, и препозициониране снимки навсякъде върху платното преди изрязване.

Приставката на Cropper изисква копие на jQuery и то идва с два файла: CSS stylesheet и библиотеката с приставки за JavaScript. Просто добавете тези файлове към страницата си и трябва да е добре!

Не забравяйте, че този инструмент идва много от функции. Онлайн документацията може да помогне, но ще трябва да си замърсите ръцете настройка на поле за качване на изображения да научи всичко. Примерният им код е точно извежда всичко на конзолата и изглежда така:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (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 също включва функция за качване където потребителят може да избере изображение от компютъра си и да започне изрязване в браузъра.

Миниатюри на живо актуализация в ъгъла, така че можете да видите как изглежда крайният резултат, преди да го запазите. Променете съотношение, на качество на изхода, на по подразбиране, и цял куп още.