Die HTML5-Komponente Canvas realisiert Bildgraustufen

HTML5, es ist so magisch. Das Programm hat den Test im Google-Browser bestanden. Ich hoffe, dass es für Sie hilfreich ist.

Erstellen Sie eine neue HTML-Seite und fügen Sie es dem Body-Tag hinzu. Fügen Sie

hinzu. Der Code lautet wie folgt:

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

Fügen Sie das einfachste JavaScript-Skript hinzu

und der Code lautet wie folgt:

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

Der Code zum Abrufen des Kontexts des Zeichenobjekts aus dem Canvas-Objekt lautet wie folgt:

Der Code lautet wie folgt folgt:

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

Fügen Sie einen hinzu. Der HTML-Code des Bildes lautet wie folgt

Der Code lautet wie folgt:

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

Der Der Javascript-Code zum Abrufen des Bildobjekts aus dem HTML-IMG-Objekt lautet wie folgt:

Der Code lautet wie folgt:

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

Der Code zum Zeichnen des erhaltenen Bildes im Canvas-Objekt lautet wie folgt:

Der Code lautet wie folgt:

context.drawImage(image, 0, 0);

Der Code zum Erhalten von Bildpixeln Die Daten aus dem Canvas-Objekt lauten wie folgt:

Der Code lautet wie folgt:

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

Pixelwerte lesen und Graustufen implementieren Der Code für die Gradberechnung lautet wie folgt:

Der Code lautet wie folgt:

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

Die Formel zur Berechnung der Graustufen ist graue Farbe = 0,299 × rote Farbe 0,578 × grüne Farbe 0,114 * Blau Farbe
Die Reihenfolge der ausgelesenen Pixelwerte ist RGBA, die jeweils die rote Farbe, die grüne Farbe, die blaue Farbe und den Alphakanal darstellen.

Die verarbeiteten Daten müssen erneut in Canvas geladen werden. Der Code lautet wie folgt:
context.putImageData(canvasData, 0, 0);
Der endgültige Effekt des Programms ist wie folgt:

Der vollständige Quellcode lautet wie folgt:

Der Code lautet wie folgt:

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

Die Dateien im Code können durch alles ersetzt werden, was Sie möchten. Die Bilddatei, die Sie sehen möchten
HTML5, erweist sich als so magisch. Das Programm hat den Test in Google Chrome bestanden.
Abschließender Rat: Versuchen Sie niemals, den oben genannten Code lokal auszuführen. Die Sicherheitsprüfung von Google Chrome verhindert automatisch das Lesen und Schreiben von Nicht-Domänendateien aus dem Browser.
Glücklicherweise danach Beim Veröffentlichen auf Tomcat oder einem beliebigen Webcontainerserver können Sie den Effekt über den Google-Browser anzeigen.