En plus d'utiliser canvas pour implémenter des filtres, vous pouvez également utiliser la technologie hors écran pour fonctionner comme une loupe.
Pour faciliter l'explication, cet article est divisé en 2 parties d'application :
L'apprentissage du canevas et la mise en œuvre de filtres ont été introduits dans l'interface drawImage . En plus de dessiner des images, cette interface peut également dessiner un objet canvas sur un autre objet canvas . Il s’agit d’une technologie hors écran.
Dans le code, il y a deux balises canevas. Ils sont respectivement visibles et invisibles. L'objet Contexte sur l'objet canevas invisible est l'endroit où nous plaçons le filigrane de l'image.
Pour plus de détails, veuillez consulter les commentaires du code :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Apprendre Canvas</title> <style> canvas { display: block margin; 0 auto border: 1px solid # 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) /* pour le second Ajouter un filigrane à l'objet Contexte obtenu par canvas */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = gras 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 /* Effectuer des opérations après le chargement de l'image*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height; scale , watermarkCanvas); // Écoute l'événement mousemove de la balise d'entrée // Remarque : mousemove surveille les changements de valeur en temps réel et consomme beaucoup de mémoire slider.onmousemove = function () { scale = slider.value drawImageByScale(canvas, ctx, img, scale, watermarkCanvas); * **********/ } /** * * @param {Object} objet toile toile* @param {Object} ctx * @param {Object} img * @param {Number} échelle Rapport de mise à l'échelle* @param {Object} objet filigrane filigrane*/ function drawImageByScale(canvas, ctx, img, scale, watermark) { //L'image est mise à l'échelle selon le rapport var width = img.width * scale, height = img. height * scale // (dx, dy) : Les coordonnées de départ du dessin img sur le canevas var dx = canvas.width / 2 - width / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 efface le canevas ctx.drawImage(img, dx, dy, width, height) // No2 redessine l'image if (filigrane) { // Non3 Déterminer s'il y a un filigrane : Oui, dessinez le filigrane ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height) } } </script></body></html>L'effet est illustré dans la figure ci-dessous :
Faites glisser le curseur pour effectuer un zoom avant ou arrière sur l'image. Cliquez ensuite avec le bouton droit pour enregistrer l'image. L'image enregistrée aura déjà un filigrane, comme indiqué ci-dessous :
3. Implémentez une loupeSur la base du zoom central mentionné ci-dessus, le maître de la loupe doit prêter attention aux deux parties suivantes :
Le code est le suivant :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Document</title> <style> canvas { display: block margin; 0 auto; ; } </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) // Canevas hors écran var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Objet contextuel du canevas hors écran 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 // Calculer le rapport de mise à l'échelle scale = offCanvas.width / canvas.width // Dans le premier état de connaissance, les deux toiles dessinent une image ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // Appuyez sur la souris canvas.onmousedown = function (événement) { event.preventDefault() // Désactive l'événement par défaut var point = windowToCanvas(event.clientX, event.clientY) // Récupère les coordonnées de la souris par rapport à l'étiquette du canevas isMouseDown = true drawCanvasWithMagnifier(true, point) // Dessine l'image agrandie sur le canevas hors écran} // Déplace la souris canvas.onmousemove = function (event) { event.preventDefault () / / Désactiver l'événement par défaut if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Relâchez la souris canvas.onmouseup = function (event) { event.preventDefault() // Désactive l'événement par défaut isMouseDown = false drawCanvasWithMagnifier(false) // Ne dessine pas la loupe hors écran} // Déplacer la souris hors de l'étiquette du canevas canvas .onmouseout = function (event) { event.preventDefault() // Désactive l'événement par défaut isMouseDown = false drawCanvasWithMagnifier(false) // Ne dessinez pas de loupe hors écran} } /** * Renvoie les coordonnées de la souris par rapport au coin supérieur gauche du canevas * @param {Number} x Les coordonnées d'écran de la souris x * @param {Number} y Les coordonnées d'écran de la souris y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox stocke les coordonnées du canevas par rapport à l'écran return { x: x - bbox.x, y: oui - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // Effacer le canevas ctx.drawImage(img, 0, 0, canvas.width, canvas . height) // Dessinez une image sur la toile/* Utilisez hors écran pour dessiner une loupe*/ if (isShow) { var { x, y } = point var mr = 50 // Longueur du côté de la loupe carrée // (sx, sy) : Coordonnées de départ de l'image à agrandir var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Agrandi Les coordonnées de départ de l'image var dx = x - mr, dy = y - mr // Crée une zone carrée à partir de (sx, sy) sur offCanvas dont la longueur et la largeur sont mr // Zoomez sur // Une zone carrée visible commençant à (dx, dy) sur la toile avec une longueur et une largeur de 2 * mr // Cela permet d'obtenir l'effet de grossissement ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * monsieur, 2 * monsieur) } /************************/ } </script></body></html >L'effet de la loupe est comme le montre l'image ci-dessous (la zone marquée avec le stylo rouge est notre loupe carrée) :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.