Kommentar: HTML5, so magisch. Das Programm wurde im Google Browser getestet. Interessierte Freunde können auf die spezifischen Schritte zur Implementierung von Image Graustufen verweisen, indem sie die in diesem Artikel erläuterte HTML5 -Komponent -Canvas verwenden. Ich hoffe, es wird Ihnen hilfreich sein.
Erstellen Sie eine neue HTML -Seite und fügen Sie sie zwischen Körper Tags hinzu
<Canvas> Graufilter </canvas>
Fügen Sie ein einfachstes JavaScript -Skript hinzu
<Pre> window.onload = function () {
var canvas = document.getElementById ("mycanvas");
<span> </span> // todo: Mach hier etwas
}
Der Code zum Abholen des Kontexts des Zeichnungsobjekts aus dem Canvas -Objekt lautet wie folgt:
var context = canvas.getContext ("2d");
Der HTML -Code zum Hinzufügen eines Bildes zur HTML -Seite lautet wie folgt
<img src = "hanjien.jpg" />
Der JavaScript -Code zum Erhalten des Bildobjekts aus dem HTML -IMG -Objekt lautet wie folgt:
var image = document.getElementById ("Imagesource");
Der Code zum Zeichnen des resultierenden Bildes im Canvas -Objekt lautet wie folgt:
context.drawimage (Bild, 0, 0);
Der Code zum Abrufen von Bildpixeldaten aus einem Canvas -Objekt lautet wie folgt:
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
Der Code zum Lesen von Pixelwerten und zur Implementierung der Graustufenberechnung lautet wie folgt:
für (var x = 0; x <canvasdata.width; x ++) {
für (var y = 0; y <canvasdata.height; y ++) {
// Index des Pixels im 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];
// Graustufenwert berechnen
var Gray = .299 * r + .587 * g + .114 * b;
// Graustufenwert zuweisen
canvasdata.data [idx + 0] = grau; // Roter Kanal
canvasdata.data [idx + 1] = grau; // Green Channel
canvasdata.data [idx + 2] = grau; // Blauer Kanal
canvasdata.data [idx + 3] = 255; // Alpha -Kanal
// schwarze Grenze hinzufügen
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;
}
}
}
Wobei die Berechnung der Graustufenformel grau ist
Die Lesepixelwerte sind RGBA, die rote Farbe, grüne Farbe, blaue Farbe und Alpha -Kanal darstellen.
Die verarbeiteten Daten müssen in Leinwand neu geladen werden. Der Code ist wie folgt:
context.putimagedata (canvasdata, 0, 0);
Der endgültige Effekt des Programms ist wie folgt:
Der vollständige Quellcode lautet wie folgt:
<html>
<kopf>
<Script>
window.onload = function () {
var canvas = document.getElementById ("mycanvas");
var image = document.getElementById ("Imagesource");
// Die Leinwand-Deminsion neu begrüßen
canvas.width = image.width;
Canvas.Height = Image.Height;
// 2D -Renderobjekt erhalten
var context = canvas.getContext ("2d");
context.drawimage (Bild, 0, 0);
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
alert (canvasdata.width.toString ());
alert (canvasdata.height.toString ());
// Graufilter
für (var x = 0; x <canvasdata.width; x ++) {
für (var y = 0; y <canvasdata.height; y ++) {
// Index des Pixels im 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];
// Graustufenwert berechnen
var Gray = .299 * r + .587 * g + .114 * b;
// Graustufenwert zuweisen
canvasdata.data [idx + 0] = grau; // Roter Kanal
canvasdata.data [idx + 1] = grau; // Green Channel
canvasdata.data [idx + 2] = grau; // Blauer Kanal
canvasdata.data [idx + 3] = 255; // Alpha -Kanal
// schwarze Grenze hinzufügen
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); // bei den Koordnen 0,0
};
</script>
</head>
<body>
<h2> Hallo Welt! </H2>
<img src = "hanjien.jpg" />
<Canvas> Graufilter </canvas>
</body>
</html>
Die Dateien im Code können alle Bilddateien ersetzen, die Sie sehen möchten
HTML5, so magisch. Das Programm wird im Google Browser getestet.
Letzten Rat, versuchen Sie nicht, den obigen Code lokal auszuführen. Die Sicherheitsprüfung von Google blockiert automatisch das Lesen und Schreiben von Nicht-Domänen-Dateien aus dem Browser.
Es ist am besten, es auf Tomcat oder einem Web -Container -Server zu veröffentlichen und den Effekt von Google Browser anzusehen.