Neben der Verwendung canvas zum Implementieren von Filtern können Sie auch Off-Screen-Technologie verwenden, um wie eine Lupe zu funktionieren.
Der Einfachheit halber ist dieser Artikel in zwei Anwendungsteile unterteilt:
Canvas-Lernen und Filterimplementierung wurden in die drawImage Schnittstelle eingeführt. Zusätzlich zum Zeichnen von Bildern kann diese Schnittstelle auch ein canvas Objekt auf ein anderes canvas Objekt zeichnen . Das ist Off-Screen-Technologie.
Im Code gibt es zwei Canvas-Tags. Sie sind sichtbar bzw. unsichtbar. Das Kontextobjekt auf dem unsichtbaren Canvas-Objekt ist der Ort, an dem wir das Bildwasserzeichen platzieren.
Weitere Details finden Sie in den Codekommentaren:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Learn Canvas</title> <style> canvas { display: block: 0 auto; 222; } input { display: block; margin: 20px auto; width: 800px } </style></head><body> <div id=app> <canvas id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 step=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 slider = document.querySelector(input) var scale = slider.value var ctx = canvas.getContext('2d') var watermarkCtx = watermarkCanvas.getContext(2d) /* für den zweiten Fügen Sie dem von Canvas */ WatermarkCanvas.width = 300 WatermarkCanvas.height = erhaltenen Kontextobjekt ein Wasserzeichen hinzu 100 WatermarkCtx.font = fett 20px Arial WatermarkCtx.lineWidth = 1 WatermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) WatermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = new Image() img.src = ./img/photo.jpg /* Vorgänge nach dem Laden des Bildes ausführen*/ img.onload = function () { canvas.width = img.width; img.height(canvas, ctx, img, Scale, WatermarkCanvas); // Lauschen Sie dem Mousemove-Ereignis des Eingabe-Tags // Hinweis: Mousemove überwacht Wertänderungen in Echtzeit und verbraucht viel Speicher. * **********/ } /** * * @param {Object} Canvas Canvas-Objekt * @param {Object} ctx * @param {Object} img * @param {Number} skalieren Skalierungsverhältnis* @param {Object} Wasserzeichen Wasserzeichenobjekt*/ Funktion drawImageByScale(canvas, ctx, img, Scale, Watermark) { //Das Bild wird entsprechend dem Verhältnis var width = img.width * scale, height = img skaliert. height * scale // (dx, dy): Die Startkoordinaten der Zeichnung img auf der Leinwand var dx = canvas.width / 2 - width / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // Nr. 1 die Leinwand löschen ctx.drawImage(img, dx, dy, width, height) // Nr. 2 das Bild neu zeichnen, wenn (Wasserzeichen) { // No3 Bestimmen Sie, ob ein Wasserzeichen vorhanden ist: Ja, zeichnen Sie das Wasserzeichen ctx.drawImage(watermark, Canvas.width - Watermark.width, Canvas.height - watermark.height) } } </script></body></html>Der Effekt ist in der folgenden Abbildung dargestellt:
Ziehen Sie den Schieberegler, um das Bild zu vergrößern oder zu verkleinern. Klicken Sie dann mit der rechten Maustaste, um das Bild zu speichern. Das gespeicherte Bild verfügt bereits über ein Wasserzeichen, wie unten gezeigt:
3. Implementieren Sie eine LupeBasierend auf dem oben erwähnten zentralen Zoom muss der Meister der Lupe auf die folgenden zwei Teile achten:
Der Code lautet wie folgt:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> canvas { display: block; border: 1px solid #222 ; } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false, Scale = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // Off-Screen-Canvas var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Kontextobjekt der Off-Screen-Leinwand 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 // Skalierungsverhältnis berechnen scale = offCanvas.width / canvas.width // Im ersten Bekanntschaftszustand zeichnen beide Leinwände ein Bild ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height) offCtx.drawImage(img, 0, 0, Canvas.width, Canvas.height) } // Maus gedrückt canvas.onmousedown = function (event) { event.preventDefault() // Standardereignis deaktivieren var point = windowToCanvas(event.clientX, event.clientY) // Holen Sie sich die Koordinaten der Maus relativ zur Leinwandbeschriftung isMouseDown = true drawCanvasWithMagnifier(true, point) // Das vergrößerte Bild auf die Leinwand außerhalb des Bildschirms zeichnen} // Bewegen Sie die Maus canvas.onmousemove = function (event) { event.preventDefault () // Deaktiviere das Standardereignis if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, Punkt) } } // Lassen Sie die Maus los die Maus außerhalb des Canvas-Labels canvas .onmouseout = function (event) { event.preventDefault() // Standardereignis deaktivieren isMouseDown = false drawCanvasWithMagnifier(false) // Zeichnen Sie keine Lupe außerhalb des Bildschirms} } /** * Gibt die Koordinaten der Maus relativ zur oberen linken Ecke der Leinwand zurück * @param {Number} x Die Bildschirmkoordinaten der Maus x * @param {Number} y Die Bildschirmkoordinaten der Maus y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox speichert die Koordinaten der Leinwand relativ zum Bildschirm return { x: x - bbox.x, y: j - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, Canvas.width, Canvas.height) // Leinwand löschen ctx.drawImage(img, 0, 0, Canvas.width, Canvas . Höhe) // Ein Bild auf die Leinwand zeichnen/* Außerhalb des Bildschirms verwenden, um eine Lupe zu zeichnen*/ if (isShow) { var { x, y } = point var mr = 50 // Seitenlänge der quadratischen Lupe // (sx, sy): Startkoordinaten des zu vergrößernden Bildes var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Vergrößert Die Startkoordinaten des Bildes var dx = x - mr, dy = y - mr // Erstellen Sie einen quadratischen Bereich beginnend bei (sx, sy) auf offCanvas, dessen Länge und Breite mr sind // Vergrößern // Einen quadratischen sichtbaren Bereich beginnend bei (dx, dy) auf der Leinwand mit einer Länge und Breite von 2 * mr // Dadurch wird der Vergrößerungseffekt erzielt ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * mr, 2 * mr) } /****************************/ } </script></body></html >Die Wirkung der Lupe ist wie im Bild unten dargestellt (der mit dem roten Stift markierte Bereich ist unsere quadratische Lupe):
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.