Exemple de code pour implémenter des niveaux de gris d'image à l'aide du composant HTML5 Canvas

HTML5 est sorti depuis longtemps, et je ne l'ai jamais regardé attentivement. Je suis juste venu ici pendant le Nouvel An pour y jeter un œil

J'ai découvert. la fonction du composant Canvas en HTML5 Elle est si puissante. Je ne blâme pas beaucoup de gens formidables d'avoir prédit que Flash est mort. Ce qui m'importe, ce n'est pas que Canvas puisse facilement implémenter des cadres photo simples. sur les pages Web et les niveaux de gris des images.

Voyons comment HTML5 Canvas le fait !

1. Créez une nouvelle page html et ajoutez

2. Ajoutez le code JavaScript le plus simple :

<canvas id="myCanvas" >Gray Filter</canvas>

Le code pour obtenir le contexte de l'objet de dessin à partir de l'objet Canvas est le suivant :

window.onload = function() {  
    var canvas = document.getElementById("myCanvas");
     // do something here!!
}

Le code html pour ajouter une image au html la page est la suivante :

var context = canvas.getContext("2d");

depuis html Le code javascript pour obtenir l'objet image dans l'objet img est le suivant :

<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />

Le code pour dessiner l'image obtenue dans l'objet Canvas est le suivant :

var image = document.getElementById("imageSource");

context.drawImage(image, 0, 0);

Le code pour obtenir les données de pixels de l'image à partir de l'objet Canvas est le suivant :

Le code pour lire les valeurs des pixels et implémenter les niveaux de gris le calcul est le suivant :

var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

for ( var x = 0; x < canvasData.width; x++) {  
        for ( var y = 0; y < canvasData.height; y++) {  
  
            // Index of the pixel in the array  
            var idx = (x + y * canvasData.width) * 4;  
            var r = canvasData.data[idx + 0];  
                var g = canvasData.data[idx + 1];  
                var b = canvasData.data[idx + 2];  
                  
                // calculate gray scale value  
                var gray = .299 * r + .587 * g + .114 * b;  
                  
            // assign gray scale value  
            canvasData.data[idx + 0] = gray; // Red channel  
            canvasData.data[idx + 1] = gray; // Green channel  
            canvasData.data[idx + 2] = gray; // Blue channel  
            canvasData.data[idx + 3] = 255; // Alpha channel  
                  
            // add black border  
            if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))   
            {  
                canvasData.data[idx + 0] = 0;  
                canvasData.data[idx + 1] = 0;  
                canvasData.data[idx + 2] = 0;  
            }  
        }  
}

其中计算灰度公式为 gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color

读取出来的像素值顺序为RGBA 分别代表red color, green color, blue color, alpha channel

处理完成的数据要重新载入到Canvas中。代码如下：

context.putImageData(canvasData, 0, 0);

程序最终的效果如下：

完全源代码如下：

  
  
<script>  
window.onload = function() {  
        var canvas = document.getElementById("myCanvas");  
        var image = document.getElementById(&quot;imageSource&quot;);  
          
        // re-size the canvas deminsion  
        canvas.width  = image.width;  
        canvas.height = image.height;  
          
        // get 2D render object  
        var context = canvas.getContext(&quot;2d&quot;);  
        context.drawImage(image, 0, 0);  
        var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  
        alert(canvasData.width.toString());  
        alert(canvasData.height.toString());  
          
        // gray filter  
        for ( var x = 0; x < canvasData.width; x++) {  
            for ( var y = 0; y < canvasData.height; y++) {  
  
                // Index of the pixel in the array  
                var idx = (x + y * canvasData.width) * 4;  
                var r = canvasData.data[idx + 0];  
                var g = canvasData.data[idx + 1];  
                var b = canvasData.data[idx + 2];  
                  
                // calculate gray scale value  
                var gray = .299 * r + .587 * g + .114 * b;  
                  
                // assign gray scale value  
                canvasData.data[idx + 0] = gray; // Red channel  
                canvasData.data[idx + 1] = gray; // Green channel  
                canvasData.data[idx + 2] = gray; // Blue channel  
                canvasData.data[idx + 3] = 255; // Alpha channel  
                  
                // add black border  
                if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))   
                {  
                    canvasData.data[idx + 0] = 0;  
                    canvasData.data[idx + 1] = 0;  
                    canvasData.data[idx + 2] = 0;  
                }  
            }  
        }  
        context.putImageData(canvasData, 0, 0); // at coords 0,0  
    };  
</script>  
  
  
    
Hello World!
  
    <img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />  
    
  
    <canvas id="myCanvas" >Gray Filter</canvas>  
  

代码中的文件可以替换任意你想要看到的图片文件,HTML5, 原来如此神奇。

程序在google浏览器中测试通过千万不要在本地尝试运行上面的代码，google

Le contrôle de sécurité du navigateur empêchera automatiquement la lecture et l'écriture des fichiers n'appartenant pas au domaine à partir du navigateur. Il est préférable de les publier sur Tomcat ou

ou n'importe quel site Web. serveur de conteneur Vous pourrez vérifier l'effet à partir du navigateur Google ultérieurement.

Ce qui précède est le contenu de l'exemple de code du composant HTML5 Canvas pour obtenir des niveaux de gris d'image. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois (www.php .cn) !