Commentaire: HTML5, si magique. Le programme a été testé dans Google Browser. Les amis intéressés peuvent se référer aux étapes spécifiques pour implémenter l'image en niveaux de gris en utilisant le canevas du composant HTML5 expliqué dans cet article. J'espère que cela vous sera utile.
Créez une nouvelle page HTML et ajoutez-la entre les balises corporelles
<Hiseto
Ajouter un script JavaScript le plus simple
<pre> window.onload = function () {
var canvas = document.getElementById ("myCanvas");
<span> </span> // todo: faites quelque chose ici
}
Le code pour obtenir le contexte du contexte de l'objet de dessin à partir de l'objet Canvas est le suivant:
var context = canvas.getContext ("2d");
Le code HTML pour ajouter une image à la page HTML est le suivant
<img src = "hanjiaren.jpg" />
Le code JavaScript pour obtenir l'objet image à partir de l'objet HTML IMG est le suivant:
var image = document.getElementById ("imagesource");
Le code pour dessiner l'image résultante dans l'objet Canvas est le suivant:
context.DrawImage (image, 0, 0);
Le code pour obtenir des données de pixels d'image à partir d'un objet Canvas est la suivante:
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
Le code pour la lecture des valeurs de pixels et la mise en œuvre du calcul des niveaux de gris est le suivant:
pour (var x = 0; x <canvasdata.width; x ++) {
pour (var y = 0; y <canvasdata.height; y ++) {
// Index du pixel dans le tableau
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];
// Calculer la valeur de l'échelle de gris
var gris = .299 * r + .587 * g + .114 * b;
// attribue la valeur de l'échelle grise
canvasdata.data [idx + 0] = gris; // canal rouge
canvasdata.data [idx + 1] = gris; // canal vert
canvasdata.data [idx + 2] = gris; // canal bleu
canvasdata.data [idx + 3] = 255; // canal alpha
// Ajouter une bordure noire
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;
}
}
}
Où la formule en niveaux de gris de calcul est une couleur grise = 0,299 × couleur rouge + 0,578 × couleur verte + 0,114 * couleur bleue
Les valeurs de pixels lues sont RGBA, qui représentent la couleur rouge, la couleur verte, la couleur bleue, le canal alpha.
Les données traitées doivent être rechargées en toile. 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:
<html>
<adal>
<cript>
window.onload = function () {
var canvas = document.getElementById ("myCanvas");
var image = document.getElementById ("imagesource");
// redimensionner la déminsion en toile
canvas.width = image.width;
canvas.height = image.Height;
// Obtenez un objet de rendu 2D
var context = canvas.getContext ("2d");
context.DrawImage (image, 0, 0);
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
alert (canvasdata.width.toString ());
alert (canvasdata.height.toString ());
// Filtre gris
pour (var x = 0; x <canvasdata.width; x ++) {
pour (var y = 0; y <canvasdata.height; y ++) {
// Index du pixel dans le tableau
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];
// Calculer la valeur de l'échelle de gris
var gris = .299 * r + .587 * g + .114 * b;
// attribue la valeur de l'échelle grise
canvasdata.data [idx + 0] = gris; // canal rouge
canvasdata.data [idx + 1] = gris; // canal vert
canvasdata.data [idx + 2] = gris; // canal bleu
canvasdata.data [idx + 3] = 255; // canal alpha
// Ajouter une bordure noire
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); // aux coords 0,0
};
</cript>
</ head>
<body>
<h2> Bonjour le monde! </h2>
<img src = "hanjiaren.jpg" />
<Hiseto
</docy>
</html>
Les fichiers du code peuvent remplacer les fichiers d'image que vous souhaitez voir
HTML5, si magique. Le programme est testé dans Google Browser.
Dernier conseil, n'essayez pas d'exécuter le code ci-dessus localement. La vérification de sécurité de Google bloquera automatiquement la lecture et la rédaction de fichiers non du domaine du navigateur.
Il est préférable de le publier sur Tomcat ou n'importe quel serveur de conteneurs Web et d'afficher l'effet de Google Browser.