Помимо использования canvas для реализации фильтров, вы также можете использовать внеэкранную технологию , которая будет работать как увеличительное стекло.
Для удобства объяснения данная статья разделена на 2 прикладные части:
В интерфейс drawImage добавлено обучение Canvas и реализация фильтров. Помимо рисования изображений, этот интерфейс также может рисовать один объект canvas на другом объекте canvas . Это закадровая технология.
В коде есть два тега холста. Они соответственно видимы и невидимы. Объект Context на невидимом объекте холста — это место, где мы размещаем водяной знак изображения.
Более подробную информацию смотрите в комментариях к коду:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Learn Canvas</title> <style> Canvas { display: Block; Margin: 0 auto; Border: 1px Solid # 222; } input { display: блок; маржа: 20 пикселей авто; ширина: 800 пикселей } </style></head><body> <div id=app> <canvas id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 шаг=0.1> <canvas id=watermark-canvas style=display: none;></canvas> </div> <script type=text/javascript> window.onload = function () { var Canvas = document.querySelector(#my-canvas) var WatermarkCanvas = document.querySelector(#watermark-canvas) var слайдер = document.querySelector(input) var масштаб = слайдер.значение var ctx = Canvas.getContext('2d') var WatermarkCtx = WatermarkCanvas.getContext(2d) /* для второго Добавьте водяной знак к объекту Context, полученному с помощью холста */watermarkCanvas.width = 300 WatermarkCanvas.height = 100 водяной знакCtx.font = жирный шрифт 20 пикселей Arial водяной знакCtx.lineWidth = 1 водяной знакCtx.fillStyle = rgba(255, 255, 255, 0,5) WatermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = new Image() img.src = ./img/photo.jpg /* Выполнение операций после загрузки изображения*/ img.onload = function () { Canvas.width = img.width; Canvas.height = img.height; drawImageByScale(canvas, ctx, img, Scale, WatermarkCanvas); // Прослушиваем событие mousemove входного тега // Примечание: mousemove отслеживает изменения значений в режиме реального времени и потребляет большой объем памяти. * **********/ } /** * * @param {Object} объект холста холста* @param {Object} ctx * @param {Object} img * @param {Number} масштаб Коэффициент масштабирования* @param {Object} водяной знак объект водяного знака*/ function drawImageByScale(canvas, ctx, img, Scale, Watermark) { //Изображение масштабируется в соответствии с соотношением var width = img.width * Scale, height = img. высота * масштаб // (dx, dy): Начальные координаты отрисовки img на холсте var dx = Canvas.width/2 - width/2, dy = Canvas.height/2 - height / 2 ctx.clearRect(0, 0, Canvas.width, Canvas.height) // No1 очищает холст ctx.drawImage(img, dx, dy, width, height) // No2 перерисовывает изображение if (водяной знак) { // Нет3 Определить, есть ли водяной знак: Да, нарисовать водяной знак ctx.drawImage(watermark, Canvas.width - Watermark.width, Canvas.height - водяной знак.высота) } } </script></body></html>Эффект показан на рисунке ниже:
Перетащите ползунок, чтобы увеличить или уменьшить изображение. Затем щелкните правой кнопкой мыши, чтобы сохранить изображение. Сохраненное изображение уже будет иметь водяной знак, как показано ниже:
3. Используйте увеличительное стеклоОсновываясь на вышеупомянутом центральном увеличении, мастеру увеличительного стекла необходимо обратить внимание на следующие две части:
Код выглядит следующим образом:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> Canvas { display: Block; Margin: 0 auto; Border: 1px Solid #222 } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false, масштаб = 1,0 var Canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // Холст вне экрана var ctx = Canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Контекстный объект внеэкранного холста var img = new Image() window.onload = function () { img.src = ./img/photo.jpg img.onload = function () { Canvas.width = img.width Canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // Вычисляем коэффициент масштабирования. Scale = offCanvas.width/canvas.width // В первом состоянии знакомства оба холста рисуют изображение ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) offCtx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } // Нажатие мыши Canvas.onmousedown = function (event) { event.preventDefault() // Отключить событие по умолчанию var point = windowToCanvas(event.clientX, event.clientY) // Получаем координаты мыши относительно метки холста isMouseDown = true drawCanvasWithMagnifier(true, point) // Рисуем увеличенное изображение на внеэкранном холсте} // Перемещаем мышь Canvas.onmousemove = function (event) { event.preventDefault () // Отключить событие по умолчанию if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Отпускаем мышь. Canvas.onmouseup = function (event) { event.preventDefault() // Отключаем событие по умолчанию isMouseDown = false drawCanvasWithMagnifier(false) // Не рисуем закадровую лупу} // Перемещение мышь выходит за пределы метки холста Canvas .onmouseout = function (event) { event.preventDefault() // Отключить событие по умолчанию isMouseDown = false drawCanvasWithMagnifier(false) // Не рисовать заэкранную лупу} } /** * Возвращает координаты мыши относительно левого верхнего угла холста * @param {Number} x Экранные координаты мыши x * @param {Number} y Экранные координаты мыши y */ function windowToCanvas(x, y) { var bbox = Canvas.getBoundingClientRect() // bbox хранит координаты холста относительно экрана return { x: x - bbox.x, y: й - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) // Очищаем холст ctx.drawImage(img, 0, 0, Canvas.width, Canvas . height) // Рисуем изображение на холсте/* Используйте закадровое изображение для рисования увеличительного стекла*/ if (isShow) { var { x, y } = point var mr = 50 // Длина стороны квадратной лупы // (sx, sy): начальные координаты увеличиваемого изображения var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Увеличено Начальные координаты изображения var dx = x - mr, dy = y - mr // Создаем квадратную область, начиная с (sx, sy) на offCanvas, длина и ширина которой равна mr // Увеличьте масштаб // Квадратная видимая область, начиная с (dx, dy) на холсте с длиной и шириной 2 * mr // Это обеспечивает эффект увеличения ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * mr, 2 * mr) } /************************/ } </script></body></html >Эффект лупы такой, как показано на картинке ниже (область, отмеченная красной ручкой, — это наша квадратная лупа):
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.