Imej tetapan amalan HTML5 kepada kemahiran tutorial grayscale_html5

Pada masa lalu, untuk memaparkan imej skala kelabu di web, anda perlu menukarnya secara manual menggunakan perisian imej. Tetapi kini proses ini boleh dicapai dengan bantuan kanvas HTML5, tanpa perlu menggunakan perisian penyuntingan imej. Saya membuat demo menggunakan html5 dan jquery untuk menunjukkan cara melaksanakan fungsi ini.

Tujuan Demo ini akan menunjukkan kepada anda cara menggunakan HTML5 dan jquery untuk bertukar antara imej skala kelabu dan imej asal apabila tetikus bergerak keluar daripada imej. Sebelum kemunculan HTML5, untuk melaksanakan fungsi ini, anda perlu menyediakan dua imej, satu imej skala kelabu dan satu imej asal. Tetapi kini ia boleh dicapai dengan lebih pantas dan mudah dengan bantuan HTML5, kerana imej skala kelabu dijana terus pada imej asal. Saya harap kod js ini akan membantu apabila anda membuat fail atau fungsi paparan imej.

Perenderan kod jquery Kod jquery berikut akan mencari imej sasaran dan menjana Versi skala kelabu. Apabila anda menggerakkan tetikus anda ke atas imej, imej skala kelabu bertukar kepada warna utama.

Salin kod Kodnya adalah seperti berikut: // Acara pemuatan tetingkap ditetapkan untuk menunggu semua imej yang akan dimuatkan. Jalankan $(window).load(function(){ // untuk membuat imej pudar, supaya imej asal dengan warna tidak akan dipaparkan, dan kemudian laksanakan pemuatan tetingkap acara $( ".item img").fadeIn(500); //Salin imej $('.item img').each(function(){ var el = $ (ini); el.css({"kedudukan":"mutlak"}).wrap(" ").clone() .addClass('img_grayscale' ).css({"kedudukan":"mutlak","z-index":"998","opacity":"0"}).masukkanSebelum(el).queue(fungsi(){ var el = $(this); el.parent().css({"width":this.width,"height":this.height}); }); this.src = grayscale(this.src); }; function(){ $(this).parent().find('img:first').stop().animate({opacity:1}, 1000 }) $( '.img_grayscale').mouseout (function(){ $(this).stop().animate({opacity:0}, 1000); }); // Gunakan kanvas untuk membuat gambar kelabu fungsi skala kelabu(src){ var canvas = document.createElement('canvas'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; 0); var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); (var x = 0; x &lt ; imgPixels.width; x ){ var i = (y * 4) * imgPixels.width x * 4 [i 2]) / 3; i] = purata; imgPixels.data[i 1] = purata; imgPixels.data[i 2] = purata } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height; kembali canvas.toDataURL(); Cara menggunakan Ikuti langkah di bawah: Rujukan jquery.js Salin kod di atas Tetapkan imej sasaran (cth: .post-img, img , . galeri img, dsb.) Anda juga boleh menetapkan kelajuan animasi (cth. 1000 = 1 saat) Keserasian Saya mencuba segala-galanya yang menyokong penyemak imbas html5 dan kanvas, seperti Chrome, Safari dan Firefox. Jika ia adalah penyemak imbas yang tidak menyokong HTML5, ia hanya akan menggunakan imej asal dan tidak akan menghasilkan imej skala kelabu. Nota: Jika fail html tempatan tidak boleh dijalankan pada firefox dan chrome, anda perlu menggunakan fail html ke pelayan.

Latihan Kendiri Saya telah mengujinya sendiri mengikut tutorial dan mendapati beberapa perkara yang perlu diberi perhatian Apabila saya membuka halaman menggunakan firefox, program tidak berjalan dengan betul, tetapi selepas menggunakan kod yang berkaitan ke pelayan Ia berfungsi. Ia mestilah imej setempat, jika tidak, ralat Keselamatan akan dilaporkan. Ini kerana : Kanvas ialah elemen kanvas dalam standard HTML5 dan boleh digunakan untuk melukis imej 2D dan 3D Tetapi mudah untuk menghadapi masalah ralat Keselamatan semasa menyahpepijat . Pada masa ini, ralat Keselamatan yang saya temui semasa penyahpepijatan kebanyakannya muncul dalam toDataURL() dan src Ralat keselamatan bermakna kod ini tidak mempunyai masalah semantik, tetapi ia tidak dapat dijalankan secara normal atas sebab keselamatan >

Ralat Throw Security : Menggunakan imej merentas domain dalam Kanvas Penyahpepijatan dalam persekitaran tanpa pelayan setempat Tidak dapat memperoleh hubungan antara domain semasa dan imej Dalam Sesetengah penyelesaian yang ditemui pada stackoverflow biasanya membenarkan anda menyelesaikan masalah merentas domain Tetapi sebenarnya, masalah ini juga akan berlaku jika anda tidak menggunakan perisian pelayan semasa menyahpepijat secara setempat semasa menyahpepijat secara setempat, Pada masa ini, fail imej tempatan digunakan dalam Kanvas ralat Keselamatan masih akan dilemparkan dalam Chrome dan Firefox Penyelesaian biasa ialah menyediakan persekitaran pelayan secara setempat atau menyerahkan kandungan kepada pelayan penyahpepijatan.