Komponen HTML5 Kanvas merealisasikan skala kelabu imej

HTML5, ternyata sangat ajaib. Program ini lulus ujian dalam penyemak imbas Google. Rakan yang berminat boleh merujuk kepada langkah-langkah khusus untuk melaksanakan skala kelabu imej dengan Kanvas komponen HTML5 yang dijelaskan dalam artikel ini. Saya harap ia akan membantu anda

Buat halaman html baharu dan tambahkannya pada teg badan Tambah

dan kodnya adalah seperti berikut:

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

Tambah skrip JavaScript yang paling mudah

dan kodnya adalah seperti berikut:

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

Kod untuk mendapatkan konteks objek lukisan daripada objek Canvas adalah seperti berikut:

Kod adalah seperti berikut:

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

Tambah kod html imej adalah seperti berikut

Kod tersebut adalah seperti berikut:

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

kod javascript untuk mendapatkan objek imej daripada objek html img adalah seperti berikut:

Kodnya adalah seperti berikut:

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

Kod untuk melukis imej yang diperolehi dalam objek Canvas adalah seperti berikut:

Kod adalah seperti berikut:

context.drawImage(image, 0, 0);

Kod untuk mendapatkan piksel imej data daripada objek Canvas adalah seperti berikut:

Kodnya adalah seperti berikut:

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

Baca nilai piksel dan laksanakan skala kelabu Kod untuk pengiraan darjah adalah seperti berikut:

Kodnya adalah seperti berikut:

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

Formula untuk mengira skala kelabu ialah warna kelabu = 0.299 × warna merah 0.578 × warna hijau 0.114 * biru warna
Turutan nilai piksel yang dibaca ialah RGBA, yang masing-masing mewakili warna merah, warna hijau, warna biru, saluran alfa

Data yang diproses mesti dimuatkan semula ke dalam Kanvas. Kodnya adalah seperti berikut:
context.putImageData(canvasData, 0, 0); >Kod sumber lengkap adalah seperti berikut
:

Kod tersebut adalah seperti berikut:

Fail dalam kod boleh digantikan dengan apa sahaja yang anda mahu Fail imej yang anda mahu lihat

HTML5, ternyata sangat ajaib. Program ini lulus ujian dalam Google Chrome Nasihat akhir, jangan sekali-kali cuba menjalankan kod di atas secara setempat Semakan keselamatan Google Chrome akan menghalang membaca dan menulis fail bukan domain daripada penyemak imbasMujurlah, selepas itu. penerbitan pada tomcat atau mana-mana pelayan kontena web, anda boleh melihat kesan daripada pelayar Google.