Konversi gambar ke skala abu-abu dalam HTML / CSS

Apakah ada cara sederhana untuk menampilkan bitmap warna dalam skala abu-abu hanya dengan HTML/CSS?

Tidak perlu kompatibel dengan IE (dan saya kira tidak akan) - jika bekerja di FF3 dan / atau Sf3, itu cukup baik untuk saya.

Saya tahu saya bisa melakukannya dengan baik SVGdan Canvas, tapi itu sepertinya banyak pekerjaan sekarang.

Apakah ada cara orang yang benar-benar malas untuk melakukan ini?

Dukungan untuk filter CSS telah masuk ke Webkit. Jadi kami sekarang memiliki solusi lintas-browser.

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

Bagaimana dengan Internet Explorer 10?

Anda dapat menggunakan polyfill seperti abu - abu .

Sebagai lanjutan dari jawaban brillout.com , dan juga jawaban Roman Nurik , dan agak merelaksasi persyaratan 'tidak ada SVG', Anda dapat menghilangkan desaturasi gambar di Firefox hanya dengan menggunakan satu file SVG dan beberapa CSS.

File SVG Anda akan terlihat seperti ini:

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

Simpan itu sebagai resources.svg, itu dapat digunakan kembali mulai sekarang untuk gambar apa pun yang ingin Anda ubah ke skala abu-abu.

Di CSS Anda, Anda mereferensikan filter menggunakan filterproperti khusus Firefox :

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

Tambahkan MS proprietary juga jika Anda suka, terapkan kelas itu ke gambar apa pun yang ingin Anda konversi ke skala abu-abu (berfungsi di Firefox> 3.5, IE8) .

sunting : Berikut adalah posting blog yang bagus yang menggambarkan penggunaan filterproperti CSS3 baru dalam jawaban SalmanPK sejalan dengan pendekatan SVG yang dijelaskan di sini. Dengan menggunakan pendekatan itu Anda akan berakhir dengan sesuatu seperti:

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

Informasi dukungan browser lebih lanjut di sini .

Untuk Firefox Anda tidak perlu membuat file filter.svg, Anda dapat menggunakan skema URI data .

Mengambil kode css dari jawaban pertama memberi:

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

Berhati-hatilah untuk mengganti string "utf-8" dengan penyandian file Anda.

Metode ini harus lebih cepat daripada yang lain karena browser tidak perlu melakukan permintaan HTTP kedua.

Pembaruan: Saya menjadikan ini sebagai repo GitHub lengkap, termasuk JavaScript polyfill untuk IE10 dan IE11: https://github.com/karlhorky/gray

Saya awalnya menggunakan jawaban SalmanPK , tetapi kemudian membuat variasi di bawah ini untuk menghilangkan permintaan HTTP tambahan yang diperlukan untuk file SVG. SVG inline berfungsi di Firefox versi 10 dan di atasnya, dan versi yang lebih rendah dari 10 tidak lagi mencakup bahkan 1% dari pasar browser global.

Sejak itu saya terus memperbarui solusi di posting blog ini , menambahkan dukungan untuk memudar kembali ke warna, dukungan IE 10/11 dengan SVG, dan sebagian abu-abu dalam 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%);
}

Jika Anda dapat menggunakan JavaScript, maka skrip ini mungkin yang Anda cari. Ini berfungsi lintas browser dan berfungsi dengan baik untuk saya sejauh ini. Anda tidak dapat menggunakannya dengan gambar yang diambil dari domain yang berbeda.

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

Baru saja mendapat masalah yang sama hari ini. Saya awalnya menggunakan solusi SalmanPK tetapi menemukan efek yang berbeda antara FF dan browser lainnya. Itu karena matriks konversi hanya berfungsi pada kecerahan saja, bukan luminositas seperti filter di Chrome / IE. Yang mengejutkan saya, saya telah menemukan bahwa solusi alternatif dan lebih sederhana di SVG juga berfungsi di FF4 + dan menghasilkan hasil yang lebih baik:

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

Dengan css:

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

Satu lagi peringatan adalah bahwa IE10 tidak mendukung "filter: grey:" dalam mode standar yang sesuai lagi, jadi perlu mode kompatibilitas beralih di header untuk bekerja:

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

Cara termudah untuk mencapai skala abu-abu dengan CSS secara eksklusif adalah melalui filterproperti.

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

Properti masih belum sepenuhnya didukung dan masih membutuhkan -webkit-filterproperti untuk dukungan di semua browser.

Tidak terlihat seperti itu mungkin (belum), bahkan dengan CSS3 atau properti milik -webkit-atau -moz-CSS.

Namun, saya menemukan posting ini dari Juni lalu yang menggunakan filter SVG pada HTML. Tidak tersedia di peramban apa pun saat ini (demo mengisyaratkan pembuatan WebKit khusus), tetapi sangat mengesankan sebagai bukti konsep.

Untuk orang-orang yang bertanya tentang dukungan IE10 + yang diabaikan dalam jawaban lain, periksa bagian CSS ini:

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

Diterapkan pada markup ini:

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

Untuk demo lainnya, periksa bagian IE3 CSS testdrive dan blog IE lama ini http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Di Internet Explorer gunakan properti filter.

Di webkit dan Firefox saat ini tidak ada cara untuk menghapus gambar hanya dengan CSS. jadi Anda harus menggunakan kanvas atau SVG untuk solusi sisi klien.

Tapi saya pikir menggunakan SVG lebih elegan. lihat posting blog saya untuk solusi SVG yang berfungsi untuk Firefox dan webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Dan sebenarnya karena SVG adalah HTML solusinya adalah murni html + css :-)

Cara baru untuk melakukan ini telah tersedia untuk beberapa waktu sekarang di browser modern.

background-blend-mode memungkinkan Anda mendapatkan beberapa efek menarik, dan salah satunya adalah konversi skala abu-abu

Luminositas nilai , yang diatur pada latar belakang putih, memungkinkannya. (arahkan kursor untuk melihatnya berwarna abu-abu)

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

Luminositas diambil dari gambar, warnanya diambil dari latar belakang. Karena selalu putih, tidak ada warna.

Tetapi memungkinkan lebih banyak.

Anda dapat menganimasikan pengaturan efek 3 layer. Yang pertama akan menjadi gambar, dan yang kedua akan menjadi gradien putih-hitam. Jika Anda menerapkan mode campuran multiply pada ini, Anda akan mendapatkan hasil putih seperti sebelumnya pada bagian putih, tetapi gambar asli pada bagian hitam (dikalikan dengan putih memberi putih, mengalikan dengan hitam tidak berpengaruh.)

Pada bagian putih gradien, Anda mendapatkan efek yang sama seperti sebelumnya. Pada bagian hitam dari gradien, Anda memadukan gambar itu sendiri, dan hasilnya adalah gambar yang tidak dimodifikasi.

Sekarang, yang diperlukan hanyalah menggerakkan gradien untuk mendapatkan efek dinamis ini: (arahkan kursor untuk melihatnya dalam warna)

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>

referensi

matriks kompatibilitas

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

Mungkin cara ini membantu Anda

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

w3schools.org

Sebenarnya lebih mudah melakukannya dengan IE jika saya ingat benar menggunakan properti CSS berpemilik. Coba ini FILTER: Graydari http://www.ssi-developer.net/css/visual-filters.shtml

Metode oleh Ax hanya membuat gambar transparan dan memiliki latar belakang hitam di belakangnya. Saya yakin Anda bisa berdebat ini abu-abu.

Meskipun Anda tidak ingin menggunakan Javascript, saya pikir Anda harus menggunakannya. Anda juga dapat menggunakan bahasa sisi server untuk melakukannya.

Jika Anda ingin menggunakan Javascript, maka Anda dapat menggunakan kanvas untuk mengubah gambar menjadi skala abu-abu. Karena Firefox dan Safari mendukung <canvas>, seharusnya berfungsi.

Jadi saya mencari Google "kanvas abu-abu", dan hasil pertama adalah http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html yang tampaknya berfungsi.

dukungan untuk filter CSS asli di webkit telah ditambahkan dari versi saat ini 19.0.1084.46

jadi -webkit-filter: grayscale (1) akan berfungsi dan mana yang lebih mudah daripada pendekatan SVG untuk webkit ...

Inilah mixin untuk KURANG yang memungkinkan Anda memilih opacity. Isi variabel Anda sendiri untuk CSS biasa dengan persentase berbeda.

Petunjuk rapi di sini , ia menggunakan tipe saturate untuk matriks sehingga Anda tidak perlu melakukan hal lain untuk mengubah persentase.

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

Kemudian gunakan:

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

Anda tidak perlu menggunakan banyak awalan untuk penggunaan penuh, karena jika Anda memilih awalan untuk firefox lama, Anda tidak perlu menggunakan awalan untuk firefox baru.

Jadi untuk penggunaan penuh, cukup gunakan kode ini:

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

Sebagai pelengkap jawaban orang lain, dimungkinkan untuk mendesaturasi gambar setengah jalan di FF tanpa sakit kepala matriks SVG :

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

Di mana $vantara 0dan 1. Ini setara dengan filter:grayscale(50%);.

Contoh langsung:

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

Referensi tentang MDN

Berdasarkan jawaban robertc :

Untuk mendapatkan konversi yang tepat dari gambar berwarna ke gambar abu-abu alih-alih menggunakan matriks seperti ini:

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

Anda harus menggunakan matriks konversi seperti ini:

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

Ini harus bekerja dengan baik untuk semua jenis gambar berdasarkan model RGBA (red-green-blue-alpha).

Untuk informasi lebih lanjut mengapa Anda harus menggunakan matriks saya memposting lebih mungkin bahwa robertc memeriksa tautan berikut:

• Sinyal perbedaan warna dan luminance
• Jawaban Margus untuk pertanyaan: "greyscalevalue in colorvalue" @stackoverflow bagian: Edit 2: @Hans Passant
• Charles A. Bouman - Universitas Purdue - TV Analog halaman 20 & 21
• Dan di sini Anda dapat menemukan beberapa kode C # dan VB

Salah satu solusi yang mengerikan tetapi bisa diterapkan: render gambar menggunakan objek Flash, yang kemudian memberi Anda semua transformasi yang dimungkinkan dalam Flash.

Jika pengguna Anda menggunakan browser yang canggih dan jika Firefox 3.5 dan Safari 4 mendukungnya (saya tidak tahu apakah itu / akan), Anda dapat menyesuaikan atribut profil warna CSS dari gambar, mengaturnya ke ICC skala abu-abu URL profil. Tapi itu banyak jika!

menjadi Alternatif untuk peramban yang lebih lama bisa menggunakan topeng yang diproduksi oleh pseudo-elements atau inline tag.

Penentuan posisi absolut melayang img (atau area teks yang tidak perlu klik atau seleksi) dapat meniru efek skala warna, melalui rgba () atau png translucide .

Itu tidak akan memberikan satu skala warna tunggal, tetapi akan menaungi warna di luar jangkauan.

uji pada pena kode dengan 10 warna berbeda melalui elemen semu, terakhir berwarna abu-abu. http://codepen.io/gcyrillus/pen/nqpDd (muat ulang untuk beralih ke gambar lain)

Anda dapat menggunakan salah satu fungsi jFunc - gunakan fungsi "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Coba plugin jquery ini. Meskipun, ini bukan solusi HTML dan CSS murni, tetapi ini adalah cara malas untuk mencapai apa yang Anda inginkan. Anda dapat menyesuaikan skala abu-abu agar sesuai dengan penggunaan Anda. Gunakan sebagai berikut:

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

Ada demo interaktif . Anda bisa bermain-main dengannya.

Lihat dokumentasi penggunaannya, itu sangat sederhana. docs

Untuk skala abu-abu sebagai persentase di Firefox, gunakan filter saturate : (cari 'saturate')

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"

Jika Anda, atau orang lain yang menghadapi masalah serupa di masa depan terbuka untuk PHP. (Saya tahu Anda mengatakan HTML / CSS, tapi mungkin Anda sudah menggunakan PHP di backend) Berikut adalah solusi PHP:

Saya mendapatkannya dari pustaka GD GD dan menambahkan beberapa variabel untuk mengotomatiskan proses ...

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

?>