Beispielcode für die Implementierung von Bildgraustufen mithilfe der HTML5-Komponente Canvas

HTML5 gibt es schon seit langer Zeit, und ich habe es mir nie genau angesehen. Ich bin gerade über Neujahr hierher gekommen, um einen Blick darauf zu werfen.

Ich habe es entdeckt Die Canvas-Komponentenfunktion in HTML5 ist so leistungsfähig. Ich kann es vielen großartigen Leuten nicht verübeln, dass sie vorhergesagt haben, dass Flash tot ist oder nicht. Mir ist es egal, dass Canvas einfache Bilderrahmen implementieren kann auf Webseiten und Bildgraustufen.

Sehen wir uns an, wie HTML5 Canvas das macht!

1. Erstellen Sie eine neue HTML-Seite und fügen Sie

2. Fügen Sie den einfachsten JavaScript-Code hinzu:

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

Der Code zum Abrufen des Zeichenobjektkontexts Context vom Canvas-Objekt lautet wie folgt :

window.onload = function() {  
    var canvas = document.getElementById("myCanvas");
     // do something here!!
}

Der HTML-Code zum Hinzufügen eines Bildes zum HTML Die Seite lautet wie folgt:

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

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

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

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

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

context.drawImage(image, 0, 0);

Der Code zum Abrufen von Bildpixeldaten aus dem Canvas-Objekt lautet wie folgt:

Der Code zum Lesen von Pixelwerten und zum Implementieren von Graustufen Die Berechnung erfolgt wie folgt:

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

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

其中计算灰度公式为 gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color

读取出来的像素值顺序为RGBA 分别代表red color, green color, blue color, alpha channel

处理完成的数据要重新载入到Canvas中。代码如下：

context.putImageData(canvasData, 0, 0);

程序最终的效果如下：

完全源代码如下：

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

代码中的文件可以替换任意你想要看到的图片文件,HTML5, 原来如此神奇。

程序在google浏览器中测试通过千万不要在本地尝试运行上面的代码，google

Die Sicherheitsprüfung des Browsers verhindert automatisch, dass Nicht-Domänendateien vom Browser gelesen und geschrieben werden. Am besten veröffentlichen Sie sie auf Tomcat oder

oder einem beliebigen Web Containerserver Sie können den Effekt später im Google-Browser überprüfen.

Das Obige ist der Inhalt des Beispielcodes der HTML5-Komponente Canvas, um Bildgraustufen zu erreichen. Für weitere verwandte Inhalte achten Sie bitte auf PHP Chinesische Website (www.php.cn)!