Canvas est vraiment une chose magique. Il peut non seulement dessiner divers graphiques, textes et bitmaps, mais également effectuer des opérations et des traitements de pixels complexes sur des bitmaps. Par conséquent, des éléments tels que les filtres peuvent réellement être implémentés à l’aide de Canvas. Ensuite, il est temps d’assister à un miracle.
Tout d’abord, nous avons besoin d’un conteneur Canvas, par exemple :
<canvas id=myCanvas width=800 height=800></canvas>
Ensuite, nous devons utiliser Canvas pour dessiner une image :
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// Préparez votre propre lien image img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//Le premier 800 représente la largeur de l'image dessinée, et le second 800 représente la hauteur de l'image dessinée}L'effet du premier dessin de Canvas
L'étape suivante consiste à effectuer quelques opérations sur les pixels de l'image. Pour implémenter une telle opération, vous devez d'abord obtenir les informations sur les pixels de l'image à partir de Canvas, et l'obtention de ces informations peut être obtenue via getImageData() .
// ... Omettre le code précédent img.onload = (e) => {// ... Omettre le code précédent img = ctx.getImageData(0, 0, 800, 800); // Obtenir la couleur de chacun; données en octets de pixels}Puisque la taille de l'image est de 800 * 800, les pixels doivent être parcourus pour obtenir les valeurs rouge, verte et bleue de chaque pixel. donc:
// ... Omettre le code précédent img.onload = (e) => {// ... Omettre le code précédent var pixelLen = 800 * 800; // Obtenir le nombre de pixels pour (var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // La première unité d'octet représente le rouge vertC = img.data[i + 1], // La deuxième unité d'octet représente le vert bleuC = img.data[i + 2], // La troisième unité d'octet représente l'alpha bleu = img.data[i + 3]; // La quatrième unité d'octet représente la transparence}}Grâce à la boucle ci-dessus, nous obtenons la valeur de couleur spécifique de chaque pixel contenu dans les données de l'image ; une chose à noter est que les données de chaque pixel ne sont pas un bit, mais quatre bits adjacents, qui représentent respectivement le rouge, le vert, valeurs de bleu, et de transparence du point. Par conséquent, en fait, la longueur du tableau de données d'octets bitmap est égale au nombre de pixels multiplié par 4. Dans la boucle for, nous traitons également cette fonctionnalité en conséquence.
En faisant la moyenne des valeurs rouge, verte et bleue de chaque point, puis en attribuant la valeur moyenne générée aux valeurs rouge, verte et bleue du pixel, un effet d'échelle de gris peut être formé. Enfin, putImageData() est utilisée pour re-dessiner simplement l'image, le code est le suivant :
// ... Omettez le code précédent img.onload = (e) => { // ... Omettez le code précédent pour (var i = 0; i < pixelLen * 4; i += 4) { // . .. Omettez le code précédent var gray = parseInt((redC + greenC + blueC) / 3); // Obtenez la valeur de gris après avoir fait la moyenne img.data[i] = gray; + 1] = gray; // Change la valeur verte img.data[i + 2] = gray; // Change la valeur bleue} ctx.putImageData(img, 0, 0, 800, 800);À ce moment, un effet de niveaux de gris se formera, comme indiqué ci-dessous
La toile dessine l'image pour la deuxième fois - effet niveaux de gris
Pour contrôler la transparence, il vous suffit de modifier la valeur correspondant à la quatrième unité d'octet. La plage de valeurs est de 0 à 256, 0 représente une transparence complète et 256 représente une opacité complète. Par exemple:
// ... Omettez le code précédent img.onload = (e) => { // ... Omettez le code précédent pour (var i = 0; i < pixelLen * 4; i += 4) { // . .. Omettre le code précédent img.data[i + 3] = 128; // Transparence 50% } // ... Omettre le code précédent }Effet de troisième dessin sur toile-augmentation de la transparence
À partir de là, en contrôlant la valeur de 4 données pour chaque pixel de l'image, l'effet du filtre peut être obtenu, n'est-ce pas si simple !
Références :
"Connaissances de base HTML5, technologies de base et cas de pointe" édité par Liu Huan
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.