ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5画像白黒変換効果

著者：Eve Cole 更新時間：2025-03-30 15:48:01

この例の目的は、HTML5とjQueryを使用してグレースケール/カラー画像のマウスサスペンション効果を作成する方法を示すことです。 HTML5が登場する前に、この効果を達成するには、色付きバージョンとグレースケールバージョンの2つの画像が必要でした。 HTML5は、灰色の画像が元のファイルから直接生成されるため、この効果をより簡単かつ効率的に作成するようになりました。このスクリプトは、ディスプレイキャビネットやフォトアルバムなどのデザインで役立つことを願っています。

次のjQueryコードでは、ターゲット画像を探し、グレースケールバージョンを生成します。マウスが画像に吊り下げられると、コードは徐々にグレースケールの画像を色に変更します。

  1. <mce：scriptsrc = jquery.min.jsmce_src = jquery.min.jstype = text/javascript> </mce：script>
  2. <mce：scriptType = text/javascript> <！ -
  4. //onwindowload.thiswaitsuntilimageshaveloaded whatissential
  5. $（window）.load（function（）{
  7. // fadeinimagessothereis notacolorpopdocumentloadおよびthenonwindowload
  8. $（。itemimg）.fadein（500）;
  10. // cloneimage
  11. $（'。itemimg '）。各（function（）{
  12. varel = $（this）;
  13. el.css（{position：absolute}）。 clone（）。addclass（ 'img_grayscale'）。css（{position：absolute、z-index：998、opacity：0}）。
  14. varel = $（this）;
  15. el.Parent（）。css（{width：this.width、height：this.height}）;
  16. el.dequeue（）;
  17. }）;
  18. this.src = grayscale（this.src）;
  19. }）;
  21. //フェディイメージ
  22. $（'。ITEMIMG '）。マウスオーバー（function（）{
  23. $（this）.parent（）。find（ 'img：first'）。stop（）。animate（{opacity：1}、1000）;
  24. }）
  25. $（'。IMG_GRAYSCALE '）。マウスアウト（function（）{
  26. $（this）.stop（）。animate（{Opacity：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コードをWebサーバーに配置する必要があります。

関連記事