Komentar: Di masa lalu, jika Anda ingin menampilkan gambar grayscale di web, Anda hanya bisa menggunakan perangkat lunak gambar secara manual untuk mengonversinya. Tetapi sekarang proses ini dapat dicapai dengan bantuan kanvas HTML5, tanpa perlu menggunakan perangkat lunak pengeditan gambar
Di masa lalu, jika Anda ingin menampilkan gambar grayscale di web, Anda hanya dapat menggunakan perangkat lunak gambar secara manual untuk mengonversinya. Tetapi sekarang proses ini dapat dicapai dengan bantuan kanvas HTML5, tanpa perlu menggunakan perangkat lunak pengeditan gambar. Saya menggunakan HTML5 dan JQuery untuk membuat demo untuk menunjukkan cara menerapkan fungsi ini.Tujuan
Demo ini akan menunjukkan kepada Anda cara beralih antara gambar skala abu -abu dan gambar asli saat menggerakkan mouse pada gambar dengan HTML5 dan jQuery. Sebelum HTML5 muncul, untuk mengimplementasikan fungsi ini, dua gambar perlu disiapkan, satu gambar skala abu -abu dan satu gambar asli. Tetapi sekarang dapat dicapai lebih cepat dan lebih mudah dengan HTML5, karena gambar skala abu -abu dihasilkan langsung pada gambar asli. Saya harap kode JS ini akan membantu saat Anda membuat fungsi tampilan file atau gambar.
Diagram reproduksi
Kode jQuery
Kode jQuery berikut akan mencari gambar target dan menghasilkan versi grayscale. Saat Anda memindahkan mouse ke gambar, gambar skala abu -abu akan berubah menjadi warna utama.
<skrip src = "jQuery.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
// Atur acara pemuatan jendela untuk menunggu semua gambar memuat sebelum berjalan
$ (window) .load (function () {
// Buat gambar secara bertahap masuk sehingga gambar asli dengan warna tidak akan ditampilkan, dan kemudian jalankan acara pemuatan jendela
$ (". Item img"). Fadein (500);
// salin gambarnya
$ ('. Item img'). masing -masing (fungsi () {
var el = $ (ini);
EL.CSS ({"Posisi": "Absolute"}). Wrap ("<Sal div>"). Clone (). AddClass ('IMG_GRAYSCALE'). CSS ({"Posisi": "Absolute", "Z-Index": "998", "Opacity": "0"}). InsertBefore (EL).).
var el = $ (ini);
el.parent (). css ({"lebar": this.width, "height": this.height});
el.dequeue ();
});
this.src = grayscale (this.src);
});
// Buat gambar secara bertahap masuk
$ ('. Item img'). mouseover (function () {
$ (ini) .parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1000);
})
$ ('. IMG_GRAYSCALE'). MouseOut (function () {
$ (ini) .stop (). animate ({opacity: 0}, 1000);
});
});
// Buat gambar abu -abu dengan kanvas
function grayscale (src) {
var canvas = document.createElement ('Canvas');
var ctx = canvas.getContext ('2d');
var imgobj = gambar baru ();
imgobj.src = src;
canvas.width = imgobj.width;
canvas.height = imgobj.height;
ctx.drawimage (imgobj, 0, 0);
var imgpixels = ctx.getImagedata (0, 0, canvas.width, canvas.height);
untuk (var y = 0; y <imgpixels.height; y ++) {
untuk (var x = 0; x <imgpixels.width; x ++) {
var i = (y * 4) * imgpixels.width + x * 4;
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
imgpixels.data [i] = rata -rata;
imgpixels.data [i + 1] = rata -rata;
imgpixels.data [i + 2] = rata -rata;
}
}
ctx.putImagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.height);
return canvas.todataurl ();
}
</script>
Cara menggunakan
Ikuti langkah -langkah di bawah ini:
Kutipan jQuery.js
Salin kode di atas
Atur gambar target (misalnya: .post-img, img, .gallery img, dll.)
Anda juga dapat mengatur kecepatan animasi (mis. 1000 = 1 detik)
kesesuaian
Saya mencoba semua browser yang mendukung HTML5 dan Canvas, seperti: Chrome, Safari, dan Firefox. Jika itu adalah browser yang tidak mendukung HTML5, itu hanya akan menggunakan gambar asli dan tidak akan menghasilkan gambar skala abu -abu.
Catatan: Jika file HTML lokal tidak dapat berjalan di Firefox dan Chrome, Anda perlu menggunakan file HTML ke server.
Praktik diri
Saya mengujinya sendiri sesuai dengan tutorial dan menemukan beberapa hal yang harus diperhatikan. Saya membuka halaman dengan Firefox. Program tidak dapat berjalan dengan benar, tetapi dapat berjalan setelah menggunakan kode yang relevan ke server.
Itu harus dijamin sebagai gambar lokal, jika tidak, Anda harus melaporkan kesalahan keamanan.
Hal ini dikarenakan:
Canvas adalah elemen kanvas dalam standar HTML5 dan dapat digunakan untuk menggambar gambar 2D dan 3D.
Namun, mudah untuk menghadapi masalah kesalahan keamanan selama debugging.
Saat ini, kesalahan keamanan yang saya temui selama debugging terutama muncul di todataurl () dan SRC.
Kesalahan keamanan menunjukkan bahwa kode ini tidak memiliki masalah semantik, tetapi tidak dapat berjalan secara normal karena alasan keamanan.
Situasi Kesalahan Keamanan Throw:
Menggunakan gambar domain silang di kanvas
Debugging di lingkungan tanpa server lokal
Tidak dapat mendapatkan hubungan antara domain saat ini dan gambar
Beberapa solusi yang ditemukan di stackoverflow biasanya membiarkan Anda menyelesaikan masalah domain lintas.
Tetapi pada kenyataannya, jika Anda tidak menggunakan perangkat lunak server selama debugging lokal, itu juga akan menyebabkan masalah ini.
Misalnya: Fungsi Todataurl digunakan selama debugging lokal, dan file gambar lokal digunakan di kanvas. Di Chrome dan Firefox, kesalahan keamanan masih akan dilemparkan.
Solusi umum adalah mengatur lingkungan server secara lokal, atau mengirimkan konten ke server untuk debugging.