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

私はグレースケール画像がより芸術的に見えると思うので、昔から好きです。 Photoshop などの多くの画像エディタでは、カラー画像を簡単にグレースケールに変換できます。色の深さと色合いを調整するオプションもあります。残念ながら、ブラウザの違いにより、これを Web 上で行うのは簡単ではありません。

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 番目の方法は JavaScript を使用することです。技術的には、IE6 以下を含むすべての JavaScript ブラウザーがそれをサポートする必要があります

コードは Ajax Blender から来ています。

3. SVG

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

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);

という名前を付けて保存する必要があります。

その後、フィルターのプロパティを使用して、SVG ファイル内の要素の ID によって 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>

また、次のように CSS ファイルに置くこともできます。

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

概要

ブラウザー間でグレースケール効果をサポートするには、上記の方法を組み合わせて、次のコード スニペットを使用してそれを実現できます。このコードは、Firefox 3.5 以降、Opera 15 以降、Safari、Chrome、IE をサポートします

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");') }

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

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

OK、ブラウザ上でクールなエフェクトを確認できます！ ！