Додавання аватара, обрізка фото на мобільному пристрої та десктопі на JavaScript та PHP
Тут усе просто. Всередині головного блоку (у моєму випадку 400x400px) я створив блок із зображенням, абсолютний блок для обчислення координат обрізки (200х200px) і так само абсолютний блок на всю ширину робочої області, який я назвав тачпадом (400х400px). Відразу звертаю Вашу увагу, що розміри цих блоків суто індивідуальні.
Функції для робочого столу.
Все починається з функцій наобумовленоївласністю. Перше що я додав до неї цю зміну масштабу зображення натисканням лівої кнопки миші із затиснутою клавішою shift. Працюємо з тачпадом. Для передачі координат php обробнику я створив 4 input type=«hidden» зі значеннями id як x1 — координата зміщення обрізки зображення по осі x, y1 відповідно по осі y, w — ширина вихідного зображення, h — висота вихідного зображення.
Як бачите тут все просто, трохи пізніше ми оголосимо функцію зміни масштабу за допомогою прокручування колеса миші, що дасть додатковий функціонал користувачеві.
Далі почнемо функцію зміни положення вихідного зображення, якщо shift не затиснули:
Як бачите тут все дуже просто, що стосується отримання координат обрізки та зміни масштабу. Далі потрібно зробити все те ж, але вже з методами touchstart і touchmove для мобільних пристроїв:
Тобто, в принципі, функції однакові, за винятком, що при роботі з сенсором нам доступне використання більше одного «курсора».
Далі трохи складніше. Якщо торкань все-таки 2, то потрібно прописати функцію зміни масштабу, а там є свої підводні камені. По-перше зі збільшенням/зменшенні необхідно зробити те щоб змінювався масштаб зображення немає від лівого верхнього кута, як від центру. По-друге, коефіцієнт завжди має бути позитивним числом і набувати значення «нуль» при спрацьовуванні функції обчислення. Ітак поїхали:
Залишилося додати зміни масштабу при прокручуванні колеса миші на робочому столі:
Обробник отриманого зображення кожен вибирає сам, особисто я використовую наступний скрипт: