เอฟเฟกต์การแปลงสีดำและสีขาวรูปภาพ HTML5

จุดประสงค์ของตัวอย่างนี้คือการแสดงวิธีสร้างเอฟเฟกต์การระงับเมาส์ของภาพสีเทา/สีโดยใช้ HTML5 และ jQuery ก่อนที่ HTML5 จะปรากฏขึ้นการบรรลุเอฟเฟกต์นี้ต้องใช้สองภาพสองรุ่นสีและสีเทา ตอนนี้ HTML5 ทำให้การสร้างเอฟเฟกต์นี้ง่ายขึ้นและมีประสิทธิภาพมากขึ้นเนื่องจากภาพสีเทาจะถูกสร้างขึ้นโดยตรงจากไฟล์ต้นฉบับ ฉันหวังว่าคุณจะพบว่าสคริปต์นี้มีประโยชน์ในการออกแบบเช่นตู้แสดงผลหรืออัลบั้มรูปภาพ

รหัส jQuery ต่อไปนี้จะค้นหาภาพเป้าหมายและสร้างเวอร์ชันสีเทา เมื่อเมาส์ถูกระงับบนภาพรหัสจะค่อยๆเปลี่ยนภาพสีเทาเป็นสี

1. <mce: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text/javascript> </mce: script>
2. <mce: scriptType = text/javascript> <!-
4. //onwindowload.ThiswaitsuntilimagesHaveLoaded ซึ่งเป็นสิ่งสำคัญ
5. $ (หน้าต่าง) .load (function () {
7. // fadeinimagessothereis notacolorpopdocumentload และ onwindowload
8. $ (. itemimg) .fadein (500);
10. // cloneimage
11. $ ('. itemimg'). แต่ละ (ฟังก์ชั่น () {
12. varel = $ (นี่);
13. el.css ({ตำแหน่ง: สัมบูรณ์}). wrap (<divclass = 'img_wrapper'style = แสดง: inline-blockmce_style = แสดง: inline-block>) clone (). addclass ('img_grayscale'). css ({ตำแหน่ง: สัมบูรณ์, z-index: 998, ความทึบ: 0})
14. varel = $ (นี่);
15. El.Parent (). CSS ({width: this.width, ความสูง: this.height});
16. El.Dequeue ();
17. -
18. this.src = grayscale (this.src);
19. -
21. // fadeimage
22. $ ('. itemimg'). mouseover (function () {
23. $ (นี่) .parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1,000);
24. -
25. $ ('. img_grayscale'). mouseout (function () {
26. $ (นี่) .stop (). animate ({ความทึบ: 0}, 1000);
27. -
28. -
30. // grayscalewcanvasmethod
31. FunctionGrayScale (SRC) {
32. varcanvas = document.createElement ('Canvas');
33. varctx = canvas.getContext ('2d');
34. varimGobj = newImage ();
35. imgobj.src = src;
36. canvas.width = imgobj.width;
37. canvas.height = imgobj.height;
38. ctx.drawimage (imgobj, 0,0);
39. varimgPixels = ctx.getimagedata (0,0, canvas.width, canvas.height);
40. สำหรับ (vary = 0; y <imgpixels.height; y ++) {
41. สำหรับ (varx = 0; x <imgpixels.width; x ++) {
42. vari = (y*4)*imgpixels.width+x*4;
43. varavg = (imgpixels.data [i]+imgpixels.data [i+1]+imgpixels.data [i+2])/3;
44. imgpixels.data [i] = avg;
45. imgpixels.data [i+1] = avg;
46. imgpixels.data [i+2] = avg;
47. -
48. -
49. ctx.putimagedata (imgpixels, 0,0,0,0, imgpixels.width, imgpixels.height);
50. returncanvas.todataurl ();
51. -
53. //-> </mce: สคริปต์>

* อ้างถึง jQuery.js

* วางรหัสข้างต้น

* ตั้งค่าภาพเป้าหมาย (ตัวอย่างเช่น. post-img, img, .gallery img ฯลฯ )

* คุณสามารถเปลี่ยนความเร็วของภาพเคลื่อนไหว (ตัวอย่างเช่น 1,000 = 1 วินาที)

สามารถทำงานกับเบราว์เซอร์ใด ๆ ที่รองรับ HTML5 และ JavaScript เช่น Chrome, Safari และ Firefox หากเบราว์เซอร์ไม่รองรับ HTML5 เอฟเฟกต์นี้จะกลับไปเป็นภาพสีดั้งเดิม หมายเหตุ: หากไฟล์ท้องถิ่นไม่ทำงานบน Firefox และ Chrome คุณต้องใส่รหัส HTML บนเว็บเซิร์ฟเวอร์