Apprentissage du canevas et code d'implémentation du filtre

À l'ère de la prolifération des produits numériques, prendre des photos est devenu un élément indispensable de la vie. Que vous soyez à la maison, en sortie ou en voyage loin, vous prendrez toujours de belles photos. Mais les photos prises directement par l’appareil photo présentent souvent un certain écart entre elles et nos attentes psychologiques. Alors comment réduire cet écart ? La réponse est les images P de beauté, donc toutes sortes d'appareils photo de beauté apparaissent, et les images P sont devenues une compétence portable.

En fait, la soi-disant beauté n'est rien de plus que l'utilisation combinée de nombreux filtres, et les filtres utilisent certains algorithmes pour manipuler les pixels de l'image afin d'obtenir des effets d'image spéciaux. Les amis qui ont utilisé Photoshop savent qu'il existe de nombreux filtres dans PS. Ci-dessous, nous utiliserons la technologie js Canvas pour obtenir plusieurs effets de filtre.

Récemment, j'ai appris le point fort du HTML5- canvas . Grâce à Canvas, le personnel front-end peut facilement effectuer un traitement d'image. Il existe de nombreuses API. Cette fois, j'apprendrai principalement les API couramment utilisées et compléterai les deux codes suivants :

• Implémenter un filtre de décoloration
• Implémenter un filtre de couleur négative (couleur inversée)

Cet élément HTML est conçu pour les graphiques vectoriels côté client. Il n'a pas de comportement propre, mais expose une API de dessin au client JavaScript afin que le script puisse dessiner ce qu'il veut sur un canevas.

Une différence importante entre <canvas> et SVG et VML est que <canvas> possède une API de dessin basée sur JavaScript, tandis que SVG et VML utilisent un document XML pour décrire le dessin.

La plupart de l'API de dessin Canvas n'est pas définie sur l'élément <canvas> lui-même, mais est définie sur un objet d'environnement de dessin obtenu via la méthode getContext() du canevas. La largeur et la hauteur par défaut de l'élément <canvas> lui-même sont respectivement de 300 px et 150 px.

 // Traitez l'élément canevas var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // Récupère l'objet contextuel sur la balise canevas spécifiée var ctx = c.getContext(2d ); ctx.fillStyle = #FF0000; // Couleur ctx.fillRect(0, 0, 150, 75);

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //Coordonnée de début ctx.lineTo(200, 100); //Coordonnée de fin ctx); .Stroke(); // Dessine immédiatement

Pour ctx.arc() , les cinq paramètres sont : (x,y,r,start,stop) . Parmi eux, x et y sont les coordonnées du centre du cercle et r est le rayon.

Les unités de start et stop sont les radians . Pas de longueur, pas de degrés.

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. accident vasculaire cérébral();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(Hello World, 10, 50);

Concernant les API de traitement d’images, il en existe principalement quatre :

Dessiner une image : drawImage(img,x,y,width,height) ou drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Récupérer les données de l'image : getImageData(x,y,width,height)

Réécrire les données d'image : putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

Exporter l'image : toDataURL([type, encoderOptions])

Pour des descriptions plus détaillées de l'API et des paramètres, veuillez consulter : Explication des paramètres de l'API de traitement d'image Canvas

Sur la base de ces API, nous pouvons dessiner nos images dans l'élément canvas . Supposons que notre image soit ./img/photo.jpg .

 <script> window.onload = function () { var img = new Image() // Déclare un nouvel objet Image img.src = ./img/photo.jpg // Une fois l'image chargée img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // En fonction de la taille de l'image, spécifiez la taille du canevas. img.width canvas.height = img.height // Dessine l'image ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

Comme le montre la figure ci-dessous, l'image est dessinée dans la toile :

Ici on emprunte principalement la fonction getImageData , qui renvoie la valeur RGBA de chaque pixel. À l'aide de formules de traitement d'image, vous pouvez manipuler les pixels pour effectuer les opérations mathématiques correspondantes.

L'effet de suppression des couleurs est équivalent aux photos en noir et blanc prises par les anciens appareils photo. En se basant sur la sensibilité de l’œil humain, les gens ont donné la formule suivante :

gray = red * 0.3 + green * 0.59 + blue * 0.11

Le code est le suivant :

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = toile.getContext(2d); toile.largeur = img.largeur toile.hauteur = img.hauteur ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Démarrer le traitement du filtre var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data . longueur / 4; ++i) { var rouge = imgData.data[i * 4], vert = imgData.data[i * 4 + 1], bleu = imgData.data[i * 4 + 2]; var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // Calculer le gris // Actualiser RVB, remarque : // imgData.data[i * 4 + 3] est stocké est alpha, pas besoin de changer imgData.data[i * 4] = gray; imgData.data[i * 4 + 1] = imgData.data[i * 4 + 2] = gris; } ctx.putImageData(imgData, 0, 0); // Réécrire les données de l'image} }</script>

L'effet est le suivant :

4.2 Effet de couleur négatif

L'effet de couleur négatif consiste à soustraire la valeur actuelle de la valeur maximale. La valeur numérique maximale théorique en RVB obtenue par getImageData est : 255. La formule est donc la suivante :

new_val = 255 - val

Le code est le suivant :

 <script> window.onload = function () { var img = new Image() img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = toile.getContext(2d); toile.largeur = img.largeur toile.hauteur = img.hauteur ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Démarrer le traitement du filtre var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data . longueur / 4; ++i) { var rouge = imgData.data[i * 4], vert = imgData.data[i * 4 + 1], bleu = imgData.data[i * 4 + 2]; // Actualiser RVB, remarque : // imgData.data[i * 4 + 3] stocke l'alpha, pas besoin de changer imgData.data[i * 4] = 255 - imgData . données[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; * 4 + 2] = 255 - imgData.data[i * 4 + 2]; } ctx.putImageData(imgData, 0, 0); // Réécrire les données de l'image} }</script>

Les rendus sont les suivants :

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.