HTML / CSS'de bir görüntüyü gri tonlamaya dönüştürme

Sadece gri tonlamalı bir renk bitmap'i görüntülemek için basit bir yolu var mı HTML/CSS?

IE uyumlu olması gerekmiyor (ve olmayacağını hayal ediyorum) - FF3 ve / veya Sf3'te çalışıyorsa, bu benim için yeterince iyi.

Her ikisi de SVGve Canvas ile yapabileceğimi biliyorum , ama şu anda çok fazla iş gibi görünüyor.

Bunu yapmanın gerçekten tembel bir yolu var mı?

CSS filtreleri desteği Webkit'e geldi. Şimdi bir çapraz tarayıcı çözümümüz var.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="http://lorempixel.com/400/200/">

Internet Explorer 10'a ne dersiniz?

Gri gibi bir poli dolgu kullanabilirsiniz .

İtibaren ardından brillout.com cevabı , hem de Roma NURIK cevabı , ve biraz 'hayır SVG' şartlarının yumuşatılmasını, yalnızca tek bir SVG dosyasını ve bazı CSS kullanarak Firefox'ta görüntüleri desatüre edebilecek.

SVG dosyanız aşağıdaki gibi görünecektir:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

Bunu resources.svg olarak kaydedin, bundan sonra gri tonlamaya değiştirmek istediğiniz herhangi bir resim için yeniden kullanılabilir.

CSS'nizde filtreye Firefox'a özgü filterözelliği kullanarak başvuruyorsunuz :

.target {
    filter: url(resources.svg#desaturate);
}

İsterseniz MS tescilli olanlarını da ekleyin, bu sınıfı gri skalaya dönüştürmek istediğiniz görüntüye uygulayın (Firefox> 3.5, IE8'de çalışır) .

edit : Buradafilter SalmanPK'nın cevabında yeni CSS3 özelliğinin burada açıklanan SVG yaklaşımı ile uyumlu olarak kullanılmasını anlatan güzel bir blog yazısı var. Bu yaklaşımı kullanarak şöyle bir şey elde edersiniz:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Daha fazla tarayıcı destek bilgisi burada .

Firefox için bir filter.svg dosyası oluşturmanız gerekmez, veri URI şemasını kullanabilirsiniz .

İlk cevabın css kodunu almak:

filter: 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+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

"Utf-8" dizesini dosya kodlamanızla değiştirmeye dikkat edin.

Tarayıcının ikinci bir HTTP isteği yapması gerekmeyeceğinden bu yöntem diğerinden daha hızlı olmalıdır.

Güncelleme: Bunu, IE10 ve IE11 için JavaScript çoklu dolgusu da dahil olmak üzere tam bir GitHub deposuna yaptım: https://github.com/karlhorky/gray

Başlangıçta SalmanPK'nın cevabını kullandım , ancak SVG dosyası için gereken ekstra HTTP isteğini ortadan kaldırmak için aşağıdaki varyasyonu oluşturdum. Satır içi SVG, Firefox 10 ve sonraki sürümlerde çalışır ve 10'dan düşük sürümler artık global tarayıcı pazarının% 1'ini oluşturmaz.

O zamandan beri çözümü bu blog yayınında güncel tutuyorum, renk solmaya destek, SVG ile IE 10/11 desteği ve demoda kısmi gri tonlama desteği ekledim.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

JavaScript kullanabiliyorsanız, bu komut dosyası aradığınız şey olabilir. Çapraz tarayıcı çalışıyor ve benim için şimdiye kadar iyi çalışıyor. Farklı bir alan adından yüklenen resimlerle kullanamazsınız.

http://james.padolsey.com/demos/grayscale/

Aynı sorunu bugün aldım. Başlangıçta SalmanPK çözümünü kullandım, ancak etkinin FF ve diğer tarayıcılar arasında farklı olduğunu öğrendim. Bunun nedeni, dönüşüm matrisinin Chrome / IE'deki filtreler gibi parlaklıkla değil, hafiflikle çalışmasıdır. Şaşırtıcı bir şekilde, SVG'deki alternatif ve daha basit çözümün FF4 + 'da da çalıştığını ve daha iyi sonuçlar verdiğini öğrendim:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Css ile:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Bir uyarı daha, IE10'un artık standartlara uygun modda "filter: grey:" özelliğini desteklememesi, bu nedenle çalışmak için başlıklarda uyumluluk modu anahtarına ihtiyaç duyması:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Sadece CSS ile gri tonlamaya ulaşmanın en basit yolu mülktür filter.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Özellik hala tam olarak desteklenmemektedir ve yine de -webkit-filtertüm tarayıcılarda destek için mülk gerektirir .

CSS3 veya tescilli -webkit-veya -moz-CSS özellikleriyle bile (henüz) mümkün görünmüyor .

Ancak, geçen Haziran'dan itibaren HTML'de SVG filtreleri kullanan bu yayını buldum . Mevcut herhangi bir tarayıcıda mevcut değildir (demo özel bir WebKit derlemesine işaret ediyor), ancak kavram kanıtı olarak çok etkileyici.

Diğer yanıtlarda yok sayılan IE10 + desteğini soran kişiler için, bu CSS parçasına göz atın:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Bu işaretlemeye uygulandı:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Daha fazla demo için IE testdrive'ın CSS3 Grafikleri bölümüne ve bu eski IE bloguna bakın http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Internet Explorer'da filter özelliğini kullanın.

Webkit ve Firefox'ta şu anda bir görüntüyü yalnızca CSS ile desatuarte etmenin bir yolu yoktur. bu nedenle istemci tarafı çözümü için tuval veya SVG kullanmanız gerekir.

Ama bence SVG kullanmak daha zarif. Firefox ve webkit için çalışan SVG çözümü için blog gönderime göz atın: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Ve kesinlikle SVG HTML olduğu için çözüm saf html + css :-)

Bunu yapmanın yeni bir yolu, modern tarayıcılarda bir süredir mevcut.

background-blend-mode bazı ilginç efektler elde etmenizi sağlar ve bunlardan biri gri tonlamalı dönüşümdür

Beyaz bir arka plan üzerinde ayarlanan parlaklık değeri buna izin verir. (gri renkte görmek için fareyle üzerine gelin)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

Parlaklık görüntüden alınır, renk arka plandan alınır. Her zaman beyaz olduğu için renk yoktur.

Ama çok daha fazlasına izin veriyor.

Efekt ayarı 3 katmanı canlandırabilirsiniz. Birincisi görüntü, ikincisi beyaz-siyah bir gradyan olacaktır. Buna bir çarpma karışımı modu uygularsanız, beyaz kısımda daha önce olduğu gibi beyaz bir sonuç elde edersiniz, ancak siyah kısımdaki orijinal görüntünün (beyazla çarpma beyaz verir, siyahla çarpmanın hiçbir etkisi yoktur).

Degradenin beyaz kısmında, eskisiyle aynı efekti elde edersiniz. Degradenin siyah kısmında, görüntüyü kendi üzerine karıştırıyorsunuz ve sonuç değiştirilmemiş görüntüdür.

Şimdi, gereken tek şey bu efekti dinamik hale getirmek için degradeyi hareket ettirmektir:

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

referans

uyumluluk matrisi

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Belki bu şekilde yardım edebilirsin

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

Tescilli bir CSS özelliği kullanarak doğru hatırlıyorsam aslında IE ile yapmak daha kolaydır. Bu deneyin FILTER: Graygelen http://www.ssi-developer.net/css/visual-filters.shtml

Ax'in yöntemi basitçe görüntüyü şeffaf hale getirir ve arkasında siyah bir arka plan vardır. Eminim bunun gri tonlama olduğunu söyleyebilirsin.

Javascript kullanmak istemeseniz de, bence kullanmak zorunda kalacaksınız. Bunu yapmak için bir sunucu tarafı dili de kullanabilirsiniz.

Javascript kullanmaya hazırsanız, görüntüyü gri tonlamaya dönüştürmek için bir tuval kullanabilirsiniz. Firefox ve Safari desteklediğinden <canvas>, çalışması gerekir.

Bu yüzden "tuval gri tonlaması" nı aradım ve ilk sonuç işe yarıyor gibi görünen http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html oldu .

webkit'teki yerel CSS filtreleri desteği mevcut sürüm 19.0.1084.46'dan eklendi

-webkit-filter: gri tonlama (1) çalışacak ve webkit için SVG yaklaşımından daha kolay ...

İşte herhangi bir opaklık seçmenizi sağlayacak LESS için bir karışım. Değişkenleri farklı yüzdelerde düz CSS için kendiniz doldurun.

Burada düzgün bir ipucu , matris için doygun türü kullanır, böylece yüzdeyi değiştirmek için süslü bir şey yapmanıza gerek yoktur.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Sonra kullanın:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

Tam kullanım için çok fazla önek kullanmanıza gerek yoktur, çünkü eski firefox için önek seçerseniz, yeni firefox için önek kullanmanıza gerek yoktur.

Yani tam kullanım için, bu kodu yeterince kullanın:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

Başkalarının cevaplarının bir tamamlayıcısı olarak, bir görüntüyü SVG'nin matrisinin baş ağrısı olmadan FF'de yarıya kadar desatüre etmek mümkündür :

<feColorMatrix type="saturate" values="$v" />

Nerede $varasındadır 0ve 1. Eşdeğerdir filter:grayscale(50%);.

Canlı örnek:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
  	<feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

MDN ile ilgili referans

Robertc'ın cevabına dayanarak :

Aşağıdaki gibi matris kullanmak yerine renkli görüntüden gri tonlamalı görüntüye doğru dönüşüm elde etmek için :

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

Dönüşüm matrisini şu şekilde kullanmalısınız:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

Bu, RGBA (kırmızı-yeşil-mavi-alfa) modeline dayanan tüm görüntü türleri için iyi çalışmalıdır.

Neden matris kullanmanız gerektiğine dair daha fazla bilgi için robertc'in aşağıdaki bağlantıları kontrol etmesi daha olasıdır:

• Parlaklık ve renk farkı sinyalleri
• Margus'un soruya cevabı: "colorvalue'da greyscalevalue" @staoverover bölümü: Düzenle 2: @Hans Passant
• Charles A. Bouman - Purdue Üniversitesi - Analog TV sayfa 20 ve 21
• Ve burada bazı C # ve VB kodlarını bulabilirsiniz

Korkunç ama uygulanabilir bir çözüm: görüntüyü bir Flash nesnesi kullanarak oluşturun, bu da size Flash'ta mümkün olan tüm dönüşümleri sağlar.

Eğer kullanıcıların kanama-kenar tarayıcıları ve kullandığınız takdirde Firefox 3.5 ve Safari 4 desteği o (bunu bilmiyorum ikisini de / olacaktır), CSS ayarlamak olabilir renk profilli bir gri tonlama ICC ayarlayarak, resmin niteliğini profil URL'si. Ama bu çok fazla!

olmak eski tarayıcı için alternatif bir sözde elemanlar veya satır içi etiketler tarafından üretilen kullanım maske olabilir.

Mutlak konumlandırma, bir img (veya tıklama veya seçim gerektirmeyen metin alanı), rgba () veya yarı saydam png aracılığıyla renk skalasının etkilerini taklit edebilir .

Tek bir renk ölçeği vermeyecek, ancak rengi aralık dışında gölgeleyecektir.

sahte kalemle 10 farklı renk kod kalemi üzerinde test, son gri. http://codepen.io/gcyrillus/pen/nqpDd (başka bir resme geçmek için yeniden yükle)

JFunc işlevlerinden birini kullanabilirsiniz - "jFunc_CanvasFilterGrayscale" işlevini kullanın http://jfunc.com/jFunc-functions.aspx

Bu jquery eklentisini deneyin. Bununla birlikte, bu saf bir HTML ve CSS çözümü değildir, ancak istediğinizi elde etmek için tembel bir yoldur. Gri tonunuzu kullanımınıza en uygun şekilde özelleştirebilirsiniz. Aşağıdaki gibi kullanın:

$("#myImageID").tancolor();

Etkileşimli bir demo var . Onunla oynayabilirsin.

Kullanım ile ilgili belgelere göz atın, oldukça basit. docs

Firefox'ta yüzde olarak gri tonlama için bunun yerine doygun filtreyi kullanın: ('doygun' araması yapın)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

Siz veya gelecekte benzer bir sorunla karşılaşan başka birisi PHP'ye açıksa. (HTML / CSS dediğini biliyorum, ama belki zaten arka uçta PHP kullanıyorsun) İşte bir PHP çözümü:

PHP GD kütüphanesinden aldım ve işlemi otomatikleştirmek için bazı değişkenler ekledim ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>