Konwertuj obraz na skalę szarości w HTML / CSS

Czy istnieje prosty sposób na wyświetlenie kolorowej mapy bitowej w skali szarości za pomocą just HTML/CSS?

Nie musi być kompatybilny z IE (i wyobrażam sobie, że nie będzie) - jeśli działa w FF3 i / lub Sf3, to mi wystarczy.

Wiem, że mogę to zrobić zarówno z SVGCanvasem, ale wydaje mi się, że to teraz dużo pracy.

Czy istnieje sposób naprawdę leniwy?

Obsługa filtrów CSS wylądowała w Webkit. Mamy teraz rozwiązanie dla różnych przeglądarek.

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/">

Co z programem Internet Explorer 10?

Możesz użyć wypełnienia jak szary .

Opierając się na brillout.com na odpowiedź , a także odpowiedzią Romana Nurika i nieco rozluźnieniem wymogu „bez SVG”, możesz desaturować obrazy w Firefoksie, używając tylko jednego pliku SVG i trochę CSS.

Twój plik SVG będzie wyglądał następująco:

<?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>

Zapisz to jako resources.svg, odtąd można go ponownie użyć do dowolnego obrazu, który chcesz zmienić na skalę szarości.

W swoim CSS odwołujesz się do filtra za pomocą filterwłaściwości specyficznej dla Firefoksa :

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

Dodaj również zastrzeżone MS, jeśli masz na to ochotę, zastosuj tę klasę do dowolnego obrazu, który chcesz przekonwertować na skalę szarości (działa w Firefox> 3.5, IE8) .

edycja : Oto miły wpis na blogu, który opisuje użycie nowej filterwłaściwości CSS3 w odpowiedzi SalmanPK w zgodzie z opisanym tutaj podejściem SVG. Korzystając z tego podejścia, uzyskasz coś w rodzaju:

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 */
}

Więcej informacji na temat obsługi przeglądarki tutaj .

W przeglądarce Firefox nie musisz tworzyć pliku filter.svg, możesz użyć schematu URI danych .

Podjęcie kodu css pierwszej odpowiedzi daje:

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+ */

Pamiętaj, aby zastąpić ciąg „utf-8” kodowaniem pliku.

Ta metoda powinna być szybsza niż druga, ponieważ przeglądarka nie będzie musiała wykonywać drugiego żądania HTTP.

Aktualizacja: Zrobiłem to w pełne repozytorium GitHub, w tym polifill JavaScript dla IE10 i IE11: https://github.com/karlhorky/gray

Pierwotnie użyłem odpowiedzi SalmanPK , ale utworzyłem poniższą odmianę, aby wyeliminować dodatkowe żądanie HTTP wymagane dla pliku SVG. Inline SVG działa w Firefox 10 i nowszych wersjach, a wersje niższe niż 10 nie stanowią już nawet 1% globalnego rynku przeglądarek.

Od tego czasu aktualizuję rozwiązanie w tym poście na blogu , dodając obsługę przejścia z powrotem do koloru, obsługę IE 10/11 z SVG i częściową skalę szarości w wersji demo.

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

Jeśli umiesz używać JavaScript, skrypt może być tym, czego szukasz. Działa w różnych przeglądarkach i do tej pory działa dla mnie dobrze. Nie można go używać z obrazami załadowanymi z innej domeny.

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

Właśnie dziś mam ten sam problem. Początkowo korzystałem z rozwiązania SalmanPK, ale odkryłem, że efekt ten różni się między FF a innymi przeglądarkami. To dlatego, że matryca konwersji działa tylko na lekkość, a nie na jasność, jak filtry w Chrome / IE. Ku mojemu zaskoczeniu dowiedziałem się, że alternatywne i prostsze rozwiązanie w SVG działa również w FF4 + i daje lepsze wyniki:

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

Z css:

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

Jeszcze jedno zastrzeżenie polega na tym, że IE10 nie obsługuje już „filtru: szarego” w trybie zgodnym ze standardami, dlatego do działania wymaga przełącznika trybu zgodności w nagłówkach:

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

Najprostszym sposobem na osiągnięcie skali szarości wyłącznie za pomocą CSS jest filterwłaściwość.

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

Właściwość nadal nie jest w pełni obsługiwana i nadal wymaga -webkit-filterwłaściwości do obsługi we wszystkich przeglądarkach.

Nie wydaje się, że jest to możliwe (jeszcze), nawet w przypadku CSS3 lub własności -webkit-lub -moz-właściwości CSS.

Znalazłem jednak ten post z czerwca ubiegłego roku, który używał filtrów SVG w HTML. Niedostępne w żadnej bieżącej przeglądarce (wersja demonstracyjna wskazująca na niestandardową kompilację WebKit), ale bardzo imponujące jako dowód koncepcji.

Dla osób, które pytają o ignorowane wsparcie IE10 + w innych odpowiedziach, sprawdź ten fragment CSS:

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

Zastosowane do tego znacznika:

<!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>

Więcej demonstracji znajdziesz w sekcji Grafika CSS3 testdrive w IE i na starym blogu IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

W przeglądarce Internet Explorer użyj właściwości filter.

W webkicie i Firefoksie nie ma obecnie sposobu na desatuarte obrazu wyłącznie za pomocą CSS. więc musisz użyć płótna lub SVG do rozwiązania po stronie klienta.

Ale myślę, że używanie SVG jest bardziej eleganckie. sprawdź mój post na blogu dotyczący rozwiązania SVG, które działa zarówno w przeglądarce Firefox, jak i w pakiecie internetowym: internetowym http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

I ściśle mówiąc, ponieważ SVG to HTML, rozwiązaniem jest czysty html + css :-)

Od jakiegoś czasu nowy sposób jest dostępny w nowoczesnych przeglądarkach.

Tryb mieszania tła pozwala uzyskać ciekawe efekty, a jednym z nich jest konwersja skali szarości

Wartość jasności , ustawiona na białym tle, pozwala na to. (najedź, aby zobaczyć to na szaro)

.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>

Jasność jest pobierana z obrazu, kolor jest pobierany z tła. Ponieważ jest zawsze biały, nie ma koloru.

Ale pozwala na znacznie więcej.

Możesz animować efekt ustawiając 3 warstwy. Pierwszy będzie obrazem, a drugi biało-czarnym gradientem. Jeśli zastosujesz w tym trybie tryb wielokrotnego mieszania, uzyskasz biały wynik jak na białej części, ale oryginalny obraz na czarnej części (pomnożenie przez biel daje biel, pomnożenie przez czerń nie ma żadnego efektu).

W białej części gradientu uzyskasz taki sam efekt jak poprzednio. W czarnej części gradientu mieszasz obraz nad sobą, a wynikiem jest niezmodyfikowany obraz.

Teraz wystarczy przesunąć gradient, aby uzyskać dynamiczny efekt: (najedź kursorem, aby zobaczyć go w kolorze)

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>

odniesienie

macierz kompatybilności

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

Może w ten sposób ci pomogę

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

w3schools.org

W rzeczywistości łatwiej jest to zrobić za pomocą IE, jeśli dobrze pamiętam, używając zastrzeżonej własności CSS. Wypróbuj to FILTER: Grayna stronie http://www.ssi-developer.net/css/visual-filters.shtml

Metoda Axa sprawia, że ​​obraz jest po prostu przezroczysty i ma za sobą czarne tło. Jestem pewien, że możesz argumentować, że to jest skala szarości.

Chociaż nie chcesz używać Javascript, myślę, że będziesz musiał go używać. Możesz także użyć do tego języka po stronie serwera.

Jeśli chcesz używać Javascript, możesz użyć płótna, aby przekonwertować obraz na skalę szarości. Ponieważ obsługuje Firefox i Safari<canvas> powinna działać.

Więc przejrzałem „płótno w skali szarości”, a pierwszym rezultatem było http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, które wydaje się działać.

obsługa natywnych filtrów CSS w pakiecie webkit została dodana z bieżącej wersji 19.0.1084.46

więc -webkit-filter: grayscale (1) będzie działać i co jest łatwiejsze niż podejście SVG dla webkit ...

Oto mix dla MNIEJ, który pozwoli Ci wybrać dowolne krycie. Wypełnij zmienne samodzielnie dla zwykłego CSS przy różnych wartościach procentowych.

Przytulna wskazówka , używa matrycy typu nasycenia, więc nie musisz robić nic fantazyjnego, aby zmienić procent.

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

Następnie użyj go:

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

Nie musisz używać tak wielu prefiksów, aby w pełni wykorzystać, ponieważ jeśli wybierzesz prefiks dla starego firefoxa, nie potrzebujesz używać prefiksu dla nowego firefoxa.

Aby więc w pełni wykorzystać, wystarczy użyć tego kodu:

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

Jako uzupełnienie odpowiedzi innych można desaturować obraz w połowie drogi do FF bez bólu głowy matrycy SVG :

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

Gdzie $vjest pomiędzy 0i 1. Jest to równoważne z filter:grayscale(50%);.

Przykład na żywo:

.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>

Odniesienie do MDN

Na podstawie odpowiedzi robertc :

Aby uzyskać prawidłową konwersję obrazu kolorowego na obraz w skali szarości zamiast korzystania z takiej matrycy:

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

Powinieneś użyć takiej macierzy konwersji:

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

Powinno to działać dobrze dla wszystkich typów obrazów opartych na modelu RGBA (czerwono-zielono-niebiesko-alfa).

Aby uzyskać więcej informacji, dlaczego warto użyć matrycy, opublikowałem bardziej prawdopodobne, że robertc sprawdzi jedno z poniższych linków:

• Sygnały luminancji i różnicy kolorów
• Odpowiedź Margusa na pytanie: „greyscalevalue in colorvalue” @stackoverflow część: Edycja 2: @Hans Passant
• Charles A. Bouman - uniwersytet Purdue - telewizja analogowa strona 20 i 21
• I tutaj możesz znaleźć kody C # i VB

Jedno okropne, ale wykonalne rozwiązanie: renderowanie obrazu za pomocą obiektu Flash, który następnie daje wszystkie możliwe transformacje we Flashu.

Jeśli Twoi użytkownicy używają najnowocześniejszych przeglądarek i jeśli Firefox 3.5 i Safari 4 to obsługują (nie wiem, czy to zrobią / zrobią), możesz dostosować atrybut profilu koloru CSS obrazu, ustawiając go na skalę szarości ICC URL profilu. Ale to dużo jeśli!

być alternatywą dla starszej przeglądarki może być użycie maski utworzonej przez pseudoelementy lub tagi wbudowane.

Bezwzględne pozycjonowanie najechania na obraz (lub obszar tekstowy, który nie wymaga kliknięcia ani zaznaczenia) może ściśle naśladować efekty skali kolorów, za pomocą rgba () lub png .

Nie da jednej skali kolorów, ale odcień kolorów poza zakresem.

test na piórze kodowym w 10 różnych kolorach za pomocą pseudoelementu, ostatni to szary. http://codepen.io/gcyrillus/pen/nqpDd (załaduj ponownie, aby przełączyć na inny obraz)

Możesz użyć jednej z funkcji jFunc - użyj funkcji „jFunc_CanvasFilterGrayscale” http://jfunc.com/jFunc-functions.aspx

Wypróbuj tę wtyczkę jquery. Chociaż nie jest to czyste rozwiązanie HTML i CSS, ale jest to leniwy sposób na osiągnięcie tego, co chcesz. Możesz dostosować skalę szarości do swoich potrzeb. Użyj go w następujący sposób:

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

Jest interaktywne demo . Możesz się z tym bawić.

Sprawdź dokumentację dotyczącą użytkowania, jest to dość proste. dokumenty

W przypadku skali szarości jako wartości procentowej w przeglądarce Firefox użyj filtru nasycenia : (wyszukaj „nasycenie”)

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"

Jeśli Ty lub ktoś, kto napotka podobny problem w przyszłości, jesteś otwarty na PHP. (Wiem, że powiedziałeś HTML / CSS, ale może już używasz PHP w backend). Oto rozwiązanie PHP:

Mam go z biblioteki PHP GD i dodałem zmienną do automatyzacji procesu ...

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

?>