홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5 사진 흑백 변환 효과

저자：Eve Cole 업데이트 시간：2025-03-30 15:48:01

이 예제의 목적은 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.thiswaitsuntilimageshaveled whatisential
  5. $ (Window) .load (function () {
  7. // fadeinimagessothereis notacolorpopdocumentload 및 theonwindowload
  8. $ (. itemimg) .fadein (500);
  10. // 복제
  11. $ ( '. itemimg'). 각 (function () {
  12. varel = $ (this);
  13. el.css ({위치 : 절대}). 랩 (<divclass = 'img_wrapper'style = display : inline-blockmce_style = display : inline-block>). clone (). addClass ( 'IMG_GRAYSCALE'). CSS ({위치 : 절대 : 절대 : 절대 : z-index : 998, 불투명도 : 0}). insertbefore (el) .queue (function () {
  14. varel = $ (this);
  15. el.parent (). css ({너비 : this.width, 높이 : this.height});
  16. el.dequeue ();
  17. });
  18. this.src = grayscale (this.src);
  19. });
  21. // fadeimage
  22. $ ( '. itemimg'). 마우스 오버 (function () {
  23. .
  24. })
  25. $ ( '. img_grayscale'). 마우스 아웃 (function () {
  26. $ (this) .stop (). 애니메이션 ({불투명도 : 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. for (vary = 0; y <imgpixels.height; y ++) {
  41. for (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 등).

* 애니메이션의 속도를 변경할 수 있습니다 (예 : 1000 = 1 초)

호환성

Chrome, Safari 및 Firefox와 같은 HTML5 및 JavaScript를 지원하는 모든 브라우저에서 작업 할 수 있습니다. 브라우저가 HTML5를 지원하지 않으면이 효과는 원래 색상 이미지로 돌아갑니다. 참고 : 로컬 파일이 Firefox 및 Chrome에서 작동하지 않으면 HTML 코드를 웹 서버에 넣어야합니다.

관련 기사