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 SVG
Canvasem, ale wydaje mi się, że to teraz dużo pracy.
Czy istnieje sposób naprawdę leniwy?
Odpowiedzi:
Obsługa filtrów CSS wylądowała w Webkit. Mamy teraz rozwiązanie dla różnych przeglądarek.
Co z programem Internet Explorer 10?
Możesz użyć wypełnienia jak szary .
źródło
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:
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ą
filter
właściwości specyficznej dla Firefoksa :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
filter
wł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:Więcej informacji na temat obsługi przeglądarki tutaj .
źródło
-webkit-filter: grayscale(100%);
następnie to:-webkit-filter: grayscale(0);
aby go usunąć.W przeglądarce Firefox nie musisz tworzyć pliku filter.svg, możesz użyć schematu URI danych .
Podjęcie kodu css pierwszej odpowiedzi daje:
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.
źródło
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.
źródło
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/
źródło
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:
Z css:
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:
źródło
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
Najprostszym sposobem na osiągnięcie skali szarości wyłącznie za pomocą CSS jest
filter
właściwość.Właściwość nadal nie jest w pełni obsługiwana i nadal wymaga
-webkit-filter
właściwości do obsługi we wszystkich przeglądarkach.źródło
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.
źródło
Dla osób, które pytają o ignorowane wsparcie IE10 + w innych odpowiedziach, sprawdź ten fragment CSS:
Zastosowane do tego znacznika:
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
źródło
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 :-)
źródło
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)
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)
odniesienie
macierz kompatybilności
źródło
img
tag nie jest używany dla obrazubackground: url()
źródło
Może w ten sposób ci pomogę
w3schools.org
źródło
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: Gray
na stronie http://www.ssi-developer.net/css/visual-filters.shtmlMetoda 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.
źródło
filter: gray
jest obecny w Internet Explorerze od wersji 4 . Wzięli dużo badziewia za swój produkt - słusznie! - ale naprawdę wyprzedzili swój czas przy tych rzeczachJeś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ć.
źródło
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 ...
źródło
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.
Następnie użyj go:
źródło
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:
źródło
Jako uzupełnienie odpowiedzi innych można desaturować obraz w połowie drogi do FF bez bólu głowy matrycy SVG :
Gdzie
$v
jest pomiędzy0
i1
. Jest to równoważne zfilter:grayscale(50%);
.Przykład na żywo:
Pokaż fragment kodu
Odniesienie do MDN
źródło
Na podstawie odpowiedzi robertc :
Aby uzyskać prawidłową konwersję obrazu kolorowego na obraz w skali szarości zamiast korzystania z takiej matrycy:
Powinieneś użyć takiej macierzy konwersji:
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:
źródło
0.2126 0.7152 0.0722 0 0
wydaje się być odpowiednikiem<fecolormatrix type="saturate" values="0">
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!
źródło
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)
źródło
Możesz użyć jednej z funkcji jFunc - użyj funkcji „jFunc_CanvasFilterGrayscale” http://jfunc.com/jFunc-functions.aspx
źródło
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:
Jest interaktywne demo . Możesz się z tym bawić.
Sprawdź dokumentację dotyczącą użytkowania, jest to dość proste. dokumenty
źródło
W przypadku skali szarości jako wartości procentowej w przeglądarce Firefox użyj filtru nasycenia : (wyszukaj „nasycenie”)
źródło
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 ...
źródło