Le composant HTML5 Canvas réalise des niveaux de gris d'image-Tutoriel H5-php.cn

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

PHP中文网

Libérer： 2016-05-16 15:49:32

original

1916 Les gens l'ont consulté

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>

Copier après la connexion

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 
}

Copier après la connexion

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");

Copier après la connexion

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" />

Copier après la connexion

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");

Copier après la connexion

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

Le code est le suivant :

context.drawImage(image, 0, 0);

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 composant HTML5 Canvas réalise des niveaux de gris d'image
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>

Copier après la connexion

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.