HTML5 инструмент для обрезки изображений
В данном уроке представлен базовый набор функционала для инструмента обрезки изображений на основе HTML5. C помощью такого инструмента изображения можно редактировать на стороне клиента.
Все действия будут проводиться с элементом canvas
.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Инструмент для обрезки изображений с помощью HTML5 | Материалы сайта RUSELLER.COM</title> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="/js/script.js"></script> </head> <body> <div class="container"> <div class="contr"> <button onclick="getResults()">Обрезать</button> </div> <canvas id="panel" width="779" height="519"></canvas> <div id="results"> <h2>Выделите нужную область и нажмите кнопку 'Обрезать'.</h2> <img id="crop_result" /> </div> </div> </body> </html>
// Переменные var canvas, ctx; var image; var iMouseX, iMouseY = 1; var theSelection; // Определяем конструктор Selection function Selection(x, y, w, h){ this.x = x; // Гачальное положение this.y = y; this.w = w; // и размер this.h = h; this.px = x; // Дополнительные переменные для вычисления при "перетаскивании" маркоеров this.py = y; this.csize = 6; // Размер маркеров this.csizeh = 10; // Размер маркеров при наведении курсора this.bHow = [false, false, false, false]; // Статусы наведения курсора this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // Размеры маркеров this.bDrag = [false, false, false, false]; // Статусы перетаскивания this.bDragAll = false; // Статус пермещения всего выделения } // Метод draw Selection.prototype.draw = function(){ ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.strokeRect(this.x, this.y, this.w, this.h); // выводим часть оригинального изображения if (this.w > 0 && this.h > 0) { ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h); } // Выводим маркеры ctx.fillStyle = '#fff'; ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2); ctx.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2); ctx.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2); ctx.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2); } function drawScene() { // Осоновная функция drawScene ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // cОчищаем эолемент canvas // Выводим оригинальное изображение ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); // и затеняем его ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Выводим выделение theSelection.draw(); } $(function(){ // Загружаем исходное изображение image = new Image(); image.onload = function () { } image.src = 'images/image.jpg'; // Создаем элемент canvas и объект context canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); // Создаем исходное выделение theSelection = new Selection(200, 200, 200, 200); $('#panel').mousemove(function(e) { // Привязываем событие мыши var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); // Для случая перемещения всего селектора if (theSelection.bDragAll) { theSelection.x = iMouseX - theSelection.px; theSelection.y = iMouseY - theSelection.py; } for (i = 0; i < 4; i++) { theSelection.bHow[i] = false; theSelection.iCSize[i] = theSelection.csize; } //Наведение курсора мыши на маркер if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh && iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) { theSelection.bHow[0] = true; theSelection.iCSize[0] = theSelection.csizeh; } if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh && iMouseY > theSelection.y - theSelection.csizeh && iMouseY < theSelection.y + theSelection.csizeh) { theSelection.bHow[1] = true; theSelection.iCSize[1] = theSelection.csizeh; } if (iMouseX > theSelection.x + theSelection.w-theSelection.csizeh && iMouseX < theSelection.x + theSelection.w + theSelection.csizeh && iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) { theSelection.bHow[2] = true; theSelection.iCSize[2] = theSelection.csizeh; } if (iMouseX > theSelection.x - theSelection.csizeh && iMouseX < theSelection.x + theSelection.csizeh && iMouseY > theSelection.y + theSelection.h-theSelection.csizeh && iMouseY < theSelection.y + theSelection.h + theSelection.csizeh) { theSelection.bHow[3] = true; theSelection.iCSize[3] = theSelection.csizeh; } // Для случая пермешениея маркера var iFW, iFH; if (theSelection.bDrag[0]) { var iFX = iMouseX - theSelection.px; var iFY = iMouseY - theSelection.py; iFW = theSelection.w + theSelection.x - iFX; iFH = theSelection.h + theSelection.y - iFY; } if (theSelection.bDrag[1]) { var iFX = theSelection.x; var iFY = iMouseY - theSelection.py; iFW = iMouseX - theSelection.px - iFX; iFH = theSelection.h + theSelection.y - iFY; } if (theSelection.bDrag[2]) { var iFX = theSelection.x; var iFY = theSelection.y; iFW = iMouseX - theSelection.px - iFX; iFH = iMouseY - theSelection.py - iFY; } if (theSelection.bDrag[3]) { var iFX = iMouseX - theSelection.px; var iFY = theSelection.y; iFW = theSelection.w + theSelection.x - iFX; iFH = iMouseY - theSelection.py - iFY; } if (iFW > theSelection.csizeh * 2 && iFH > theSelection.csizeh * 2) { theSelection.w = iFW; theSelection.h = iFH; theSelection.x = iFX; theSelection.y = iFY; } drawScene(); }); $('#panel').mousedown(function(e) { // Привязываем событие мыши var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y; if (theSelection.bHow[0]) { theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y; } if (theSelection.bHow[1]) { theSelection.px = iMouseX - theSelection.x - theSelection.w; theSelection.py = iMouseY - theSelection.y; } if (theSelection.bHow[2]) { theSelection.px = iMouseX - theSelection.x - theSelection.w; theSelection.py = iMouseY - theSelection.y - theSelection.h; } if (theSelection.bHow[3]) { theSelection.px = iMouseX - theSelection.x; theSelection.py = iMouseY - theSelection.y - theSelection.h; } if (iMouseX > theSelection.x + theSelection.csizeh && iMouseX < theSelection.x+theSelection.w - theSelection.csizeh && iMouseY > theSelection.y + theSelection.csizeh && iMouseY < theSelection.y+theSelection.h - theSelection.csizeh) { theSelection.bDragAll = true; } for (i = 0; i < 4; i++) { if (theSelection.bHow[i]) { theSelection.bDrag[i] = true; } } }); $('#panel').mouseup(function(e) { // Привязываем событие мыши theSelection.bDragAll = false; for (i = 0; i < 4; i++) { theSelection.bDrag[i] = false; } theSelection.px = 0; theSelection.py = 0; }); drawScene(); }); function getResults() { var temp_ctx, temp_canvas; temp_canvas = document.createElement('canvas'); temp_ctx = temp_canvas.getContext('2d'); temp_canvas.width = theSelection.w; temp_canvas.height = theSelection.h; temp_ctx.drawImage(image, theSelection.x, theSelection.y, theSelection.w, theSelection.h, 0, 0, theSelection.w, theSelection.h); var vData = temp_canvas.toDataURL(); $('#crop_result').attr('src', vData); $('#results h2').text('Отлично, у нас есть обрезанное изображение и его теперь можно сохранить'); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/NxuYzPFjUrQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.