Web ページの画像を作成する 3 つの方法 grey_html/css_WEB-ITnose

1. CSS フィルター

おそらく CSS フィルター プロパティを使用するのが、画像をグレースケールに変換する最も簡単な方法です。従来、Internet Explorer には、グレースケールなどのカスタム効果を適用するためのフィルターと呼ばれる独自の CSS プロパティがありました。

現在、filter 属性は CSS3 仕様の一部であり、一部のブラウザー、Firefox、Chrome、Safari でサポートされています。以前、画像をグレーにするだけでなく、茶色やぼかし効果も加える Webkit フィルターについても説明しました。

次の CSS スタイルを追加して画像をグレーにします

img {  -webkit-filter: grayscale(1);/* Webkit */  filter:gray;/* IE6-9 */  filter: grayscale(1);/* W3C */ }

IE6-9 と Webkit ブラウザー (Chrome 18 以降、Safari 6.0 以降、Opera 15 以降) をサポート

(注: このコードは Firefox 上にあります)

2. Javascript

2 番目の方法は、IE6 以下を含む技術的にすべての JavaScript をサポートする必要がある JavaScript ブラウザを使用することです

varimgObj = document.getElementById('js-image'); functiongray(imgObj) {  varcanvas = document.createElement('canvas');  varcanvasContext = canvas.getContext('2d');  varimgW = imgObj.width;  varimgH = imgObj.height;  canvas.width = imgW;  canvas.height = imgH;  canvasContext.drawImage(imgObj, 0, 0);  varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH);  for(vary = 0; y < imgPixels.height; y++){  for(varx = 0; x < imgPixels.width; x++){  vari = (y * 4) * imgPixels.width + x * 4;  varavg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;  imgPixels.data[i] = avg;  imgPixels.data[i + 1] = avg;  imgPixels.data[i + 2] = avg;  }  }  canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  returncanvas.toDataURL(); } imgObj.src = gray(imgObj);

3. SVG

3 番目の方法は SVG Filter からのものです。 SVG ファイルを作成し、その中に次のコードを記述し、***.svg

<svgxmlns=" http://www.w3.org/2000/svg">  <filterid="grayscale">  <feColorMatrixtype="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  </filter> </svg>

という名前を付けて保存し、フィルターのプロパティを使用して、SVG ファイルを要素の ID で接続できます。 SVG ファイル

img {  filter:url('img/gray.svg#grayscale'); }

たとえば、CSS ファイルに置くこともできます:

img {  filter:url('url("data:image/svg+xml;utf8,<svg%20xmlns=' http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");') }

概要

ブラウザ間でグレースケール効果をサポートするには、上記のメソッドと次のコード スニペットを併用できます。成し遂げる。このコードは、Firefox 3.5 以降、Opera 15 以降、Safari、Chrome、IE をサポートします

img {  -webkit-filter: grayscale(100%);  -webkit-filter: grayscale(1);  filter: grayscale(100%);  filter:url('../img/gray.svg#grayscale');  filter:gray; }

上記のコードを JavaScript メソッドで活用し、JavaScript が無効になっている場合のフォールバックとして CSS フィルターのみを提供できます。このアイデアは、Modernizr を使用すると簡単に実装できます。

.no-js img {  -webkit-filter: grayscale(100%);  -webkit-filter: grayscale(1);  filter: grayscale(100%);  filter:url('../img/gray.svg#grayscale');  filter:gray; }

OK、ブラウザ上でクールなエフェクトが表示されます! ！