CSSを使用して画像を白黒に変換する

時代の発展に伴い、CSS3 が徐々に進歩し、実際に「白黒効果」を大規模に適用できる可能性も見えてきました。次に、CSS3 グレースケール フィルターの実装を紹介します。興味のある友達はさらに詳しく知ることができます。 Wenchuan のような調子の悪い日には、IE (フィルター: グレー;) で Web サイトを簡単に作成できることは、長い間ご存知だったかもしれません。しかし、当時、他のブラウザでは解決策がありませんでした。しかし、時代の発展に伴い、現在では CSS3 が徐々に進歩しているため、実際に「白黒効果」を大規模に適用できる可能性も見え始めています。

CSS3グレースケールフィルターの実装
次のテストコード:

コードは次のとおりです:

.gray { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: gray; 
}

HTMLコード:

コードは次のとおりです:

<img src="mm1.jpg" /> 
<img src="mm1.jpg" class="gray" />

Chrome18+ の場合は、ここをクリックしてください: CSS3 グレースケール フィルターと白黒写真 ⤴
同様の記事の冒頭に示されている白黒のコントラスト効果の画像を確認できます。
FireFox などの他のブラウザも間もなくこれに追随する予定です。もちろん、(たとえば) FireFox 4 ブラウザ上で写真を白黒にする効果を実現することも可能です。 SVGのグレースケールフィルター効果を利用できます。
SVG フィルターの実装
新しい空のテキスト ファイル (例: grey.txt) を作成します。次の XML コードをコピーします:

コードは次のとおりです:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="grayscale"> 
<feColorMatrix type="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>

次に、サフィックス .txt → .svg を変更します。次に、Called~~

次の CSS 呼び出しコード:
filter: url(gray.svg#grayscale); すると、効果が出ます。お使いのブラウザが FireFox4+ の場合は、ここをクリックしてください: 白黒写真のデモを実現するための SVG フィルター⤴
IE ブラウザーを忘れないでください
IE での実装は上で説明しました、つまり :
filter: grey ; 少なくとも IE7 ～ 9 がサポートされています。最近IE6をテストするのが面倒なので、サポートされているかどうかはわかりません。経験から判断すると、サポートされるべきです。
国を統一する方法が必要です
CSS を使用したいだけなら、それを行うことができます。釣り竿を持って黄浦江に釣りに行くだけです。毎日、毎年、毎日…そして 2 年後、長くても 2 年後、上の 2 つのデモ ページで F5 キーを押すだけです。とても簡単です！
上記のアプローチがあまりにもロンドンベースで、自分は一途な人ではないと思われる場合は、世界を統一する方法がありますが、それは CSS のドライマターではなく、Greyscale.js を使用する必要があるようです。ある程度有名。
使用方法は非常に簡単で、次のように JavaScript ファイルを引用します:
bfe8242ffbe85b6ab07c814a32ff92392cacc6d41bbb37262a98f745aa00fbf0次に、文:
grayscale (document.getElementById("thisImage")); または DOM 要素セット:
grayscale(document.getElementsByTagName("img")); jQuery を使用したい場合は、次のようにすることもできます:
grayscale($( "#thisImage")) ; それは非常に簡単です。
実装原則: IE ブラウザーはグレースケール フィルターを追加します。これは誰もが知っています。他のブラウザでは、Canvas で getImageData メソッドを使用し、各ピクセルでグレースケール変換を実行しているようです~~
したがって、最新のブラウザでは、このメソッドには画像のグレースケール処理に 2 つの制限があります:
1.この 300*300 の平均サイズの画像が灰色になるまでに数秒かかります。
2.セキュリティ機構により、クロスドメイン画像を白黒に変換することはできません。

以上がCSSを使用して画像を白黒に変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。