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
5. $ (window) .Load (function () {
7. // fadeinimagessothereis notacolorpopdocumentload و thenonwindowload
8. $ (. itemImg) .fadein (500) ؛
10. // cloneimage
11. $ ('. itemImg'). كل (function () {
12. varel = $ (هذا) ؛
13. el.css ({الموضع: absolute}) clone (). addClass ('img_grayscale').
14. varel = $ (هذا) ؛
15. el.parent ().
16. el.dequeue () ؛
17. }) ؛
18. this.src = grayscale (this.src) ؛
19. }) ؛
21. // fadeimage
22. $ ('. itemImg'). mouseover (function () {
23. $ (this) .parent (). find ('img: first'). stop ().
24. })
25. $ ('. img_grayscale'). mouseout (function () {
26. $ (this) .stop (). ANIMATE ({عظمة: 0} ، 1000) ؛
27. }) ؛
28. }) ؛
30. // grayscalewcanvasmichod
31. وظيفة grayscale (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: script>

* QUOTE JQUERY.JS

* لصق الرمز أعلاه

* اضبط الصورة المستهدفة (على سبيل المثال .post-IMG ، IMG ، .Gallery IMG ، إلخ)

* يمكنك تغيير سرعة الرسوم المتحركة (على سبيل المثال ، 1000 = 1 ثانية)

يمكن أن تعمل على أي متصفح يدعم HTML5 و JavaScript ، مثل Chrome و Safari و Firefox. إذا كان المتصفح لا يدعم HTML5 ، فسيعود هذا التأثير إلى صورة اللون الأصلية. ملاحظة: إذا كان الملف المحلي لا يعمل على Firefox و Chrome ، فيجب عليك وضع رمز HTML على خادم الويب.