Le composant HTML5 Canvas réalise des niveaux de gris d'image

HTML5, ça s'avère tellement magique. Le programme a réussi le test dans le navigateur Google. Les amis intéressés peuvent se référer aux étapes spécifiques de mise en œuvre des niveaux de gris des images avec le composant HTML5 Canvas expliquées dans cet article. J'espère que cela vous sera utile

Créer une nouvelle page html. et ajoutez-le à la balise body Ajoutez le code suivant entre

 :

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

Ajoutez le script JavaScript le plus simple

et le le code est le suivant :

<pre name="code" class="javascript">window.onload = function() { 
var canvas = document.getElementById("myCanvas"); 
<span style="white-space:pre"> </span>// TODO: do something here 
}

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

Le code est le suivant :

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

Ajouter un Le code html de l'image est le suivant

Le code est le suivant :

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

Le code javascript pour obtenir l'objet image à partir de l'objet html img est le suivant :

Le code est le suivant :

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

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

Le code est le suivant :

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 est le suivant :

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

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

Le code est le suivant :

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; 
} 
} 
}

La formule de calcul des niveaux de gris est la couleur grise = 0,299 × couleur rouge 0,578 × couleur verte 0,114 * couleur bleue
L'ordre des valeurs de pixels lues est RGBA, qui représentent respectivement la couleur rouge, la couleur verte, la couleur bleue, le canal alpha

Les données traitées doivent être rechargées dans Canvas. Le code est le suivant :
context.putImageData(canvasData, 0, 0);
L'effet final du programme est le suivant :

Le code source complet est le suivant :

Le code est le suivant :

 
 
<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 &lt; canvasData.width; x++) { 
for ( var y = 0; y &lt; 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 &lt; 8 || y &lt; 8 || x &gt; (canvasData.width - 8) || y &gt; (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> 
 

Les fichiers dans le code peuvent être remplacés par ce que vous voulez. Le fichier image que vous voulez voir
HTML5, s'avère tellement magique. Le programme a réussi le test dans Google Chrome.
Dernier conseil, n'essayez jamais d'exécuter le code ci-dessus localement. Le contrôle de sécurité de Google Chrome empêchera automatiquement la lecture et l'écriture de fichiers n'appartenant pas au domaine à partir du navigateur
Très heureusement, après. en publiant sur Tomcat ou sur n'importe quel serveur de conteneur Web, vous pouvez voir l'effet à partir du navigateur Google.