Komentar: html5, sangat ajaib. Program ini diuji di Google Browser. Teman yang tertarik dapat merujuk pada langkah -langkah spesifik untuk mengimplementasikan gambar abu -abu dengan menggunakan kanvas komponen HTML5 yang dijelaskan dalam artikel ini. Saya harap ini akan membantu Anda.
Buat halaman HTML baru dan tambahkan di antara tag tubuh
<Canvas> Filter abu -abu </an Canvas>
Tambahkan skrip JavaScript paling sederhana
<pe> window.onload = function () {
var canvas = document.geteLementById ("myCanvas");
<span> </span> // todo: Lakukan sesuatu di sini
}
Kode untuk mendapatkan konteks konteks objek gambar dari objek Canvas adalah sebagai berikut:
var context = canvas.getContext ("2d");
Kode HTML untuk menambahkan gambar ke halaman HTML adalah sebagai berikut
<img src = "hanjiaren.jpg" />
Kode JavaScript untuk mendapatkan objek gambar dari objek HTML IMG adalah sebagai berikut:
var image = document.getElementById ("ImageSource");
Kode untuk menggambar gambar yang dihasilkan dalam objek Canvas adalah sebagai berikut:
context.drawimage (gambar, 0, 0);
Kode untuk mendapatkan data piksel gambar dari objek kanvas adalah sebagai berikut:
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
Kode untuk membaca nilai piksel dan mengimplementasikan perhitungan skala abu -abu adalah sebagai berikut:
untuk (var x = 0; x <canvasdata.width; x ++) {
untuk (var y = 0; y <canvasdata.height; y ++) {
// indeks piksel di 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];
// Hitung nilai skala abu -abu
var abu -abu = .299 * r + .587 * g + .114 * b;
// Tetapkan nilai skala abu -abu
canvasdata.data [idx + 0] = abu -abu; // saluran merah
canvasdata.data [idx + 1] = abu -abu; // saluran hijau
canvasdata.data [idx + 2] = abu -abu; // Saluran Biru
canvasdata.data [idx + 3] = 255; // Saluran Alpha
// tambahkan perbatasan hitam
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;
}
}
}
Di mana Formula Grayscale Perhitungan adalah warna abu -abu = 0,299 × warna merah + 0,578 × warna hijau + 0,114 * warna biru
Nilai piksel baca adalah RGBA, yang mewakili warna merah, warna hijau, warna biru, saluran alpha.
Data yang diproses harus dimuat ulang ke kanvas. Kodenya adalah sebagai berikut:
context.putimageData (canvasdata, 0, 0);
Efek terakhir dari program ini adalah sebagai berikut:
Kode sumber lengkap adalah sebagai berikut:
<Html>
<head>
<script>
window.onload = function () {
var canvas = document.geteLementById ("myCanvas");
var image = document.getElementById ("ImageSource");
// Ukuran ulang Deminsion Canvas
canvas.width = image.width;
canvas.height = image.height;
// Dapatkan objek render 2D
var context = canvas.getContext ("2d");
context.drawimage (gambar, 0, 0);
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
peringatan (canvasdata.width.tostring ());
peringatan (canvasdata.height.tostring ());
// filter abu -abu
untuk (var x = 0; x <canvasdata.width; x ++) {
untuk (var y = 0; y <canvasdata.height; y ++) {
// indeks piksel di 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];
// Hitung nilai skala abu -abu
var abu -abu = .299 * r + .587 * g + .114 * b;
// Tetapkan nilai skala abu -abu
canvasdata.data [idx + 0] = abu -abu; // saluran merah
canvasdata.data [idx + 1] = abu -abu; // saluran hijau
canvasdata.data [idx + 2] = abu -abu; // Saluran Biru
canvasdata.data [idx + 3] = 255; // Saluran Alpha
// tambahkan perbatasan hitam
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); // di coords 0,0
};
</script>
</head>
<body>
<h2> halo dunia! </h2>
<img src = "hanjiaren.jpg" />
<Canvas> Filter abu -abu </an Canvas>
</body>
</html>
File dalam kode dapat menggantikan file gambar apa pun yang ingin Anda lihat
Html5, sangat ajaib. Program ini diuji di Google Browser.
Saran terakhir, jangan mencoba menjalankan kode di atas secara lokal. Pemeriksaan keamanan Google secara otomatis akan memblokir membaca dan menulis file non-domain dari browser.
Yang terbaik adalah mempostingnya di Tomcat atau server wadah web apa pun dan melihat efek dari Google Browser.