Chuyển đổi hình ảnh sang thang độ xám trong HTML / CSS

Có một cách đơn giản để hiển thị một bitmap màu trong thang độ xám chỉ với HTML/CSS?

Nó không cần phải tương thích với IE (và tôi tưởng tượng nó sẽ không như vậy) - nếu nó hoạt động trong FF3 và / hoặc Sf3, điều đó đủ tốt cho tôi.

Tôi biết tôi có thể làm điều đó với cả hai SVGvà Canvas, nhưng có vẻ như rất nhiều công việc ngay bây giờ.

Có một cách thực sự lười biếng của người này để làm điều này?

Hỗ trợ cho các bộ lọc CSS đã hạ cánh trong Webkit. Vì vậy, bây giờ chúng tôi có một giải pháp trình duyệt chéo.

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 thì sao?

Bạn có thể sử dụng một polyfill như màu xám .

Theo dõi câu trả lời của brillout.com , và cả câu trả lời của Roman Nurik và thư giãn phần nào yêu cầu 'không có SVG', bạn có thể khử bão hòa hình ảnh trong Firefox chỉ bằng một tệp SVG và một số CSS.

Tệp SVG của bạn sẽ trông như thế này:

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

Lưu nó dưới dạng resource.svg, từ giờ trở đi, nó có thể được sử dụng lại cho bất kỳ hình ảnh nào bạn muốn thay đổi thành thang độ xám.

Trong CSS của bạn, bạn tham chiếu bộ lọc bằng thuộc tính cụ thể của Firefox filter:

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

Thêm những cái độc quyền của MS nữa nếu bạn cảm thấy thích nó, áp dụng lớp đó cho bất kỳ hình ảnh nào bạn muốn chuyển đổi sang thang độ xám (hoạt động trong Firefox> 3.5, IE8) .

chỉnh sửa : Đây là một bài đăng blog hay mô tả bằng cách sử dụng thuộc tính CSS3 mới filtertrong câu trả lời của SalmanPK cùng với cách tiếp cận SVG được mô tả ở đây. Sử dụng phương pháp đó bạn sẽ kết thúc với một cái gì đó như:

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

Thêm thông tin hỗ trợ trình duyệt ở đây .

Đối với Firefox, bạn không cần tạo tệp filter.svg, bạn có thể sử dụng lược đồ URI dữ liệu .

Lấy mã css của câu trả lời đầu tiên sẽ cho:

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

Hãy cẩn thận để thay thế chuỗi "utf-8" bằng mã hóa tệp của bạn.

Phương pháp này phải nhanh hơn phương pháp kia vì trình duyệt sẽ không cần thực hiện yêu cầu HTTP thứ hai.

Cập nhật: Tôi đã biến nó thành một repo GitHub đầy đủ, bao gồm JavaScript polyfill cho IE10 và IE11: https://github.com/karlhorky/gray

Ban đầu tôi đã sử dụng câu trả lời của SalmanPK , nhưng sau đó đã tạo ra biến thể bên dưới để loại bỏ yêu cầu HTTP bổ sung cần thiết cho tệp SVG. SVG nội tuyến hoạt động trong các phiên bản Firefox 10 trở lên và các phiên bản thấp hơn 10 không còn chiếm tới 1% thị trường trình duyệt toàn cầu.

Kể từ đó, tôi đã giữ cho giải pháp được cập nhật trên bài đăng trên blog này , thêm hỗ trợ để làm mờ dần màu sắc, hỗ trợ IE 10/11 với SVG và thang độ xám một phần trong bản 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%);
}

Nếu bạn có thể sử dụng JavaScript, thì tập lệnh này có thể là thứ bạn đang tìm kiếm. Nó hoạt động trên nhiều trình duyệt và hoạt động tốt cho tôi cho đến nay. Bạn không thể sử dụng nó với hình ảnh được tải từ một tên miền khác.

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

Chỉ cần có cùng một vấn đề ngày hôm nay. Ban đầu tôi đã sử dụng giải pháp SalmanPK nhưng phát hiện ra rằng hiệu ứng khác nhau giữa FF và các trình duyệt khác. Đó là bởi vì ma trận chuyển đổi chỉ hoạt động ở độ sáng chứ không phải độ sáng như các bộ lọc trong Chrome / IE. Thật ngạc nhiên, tôi đã phát hiện ra rằng giải pháp thay thế và đơn giản hơn trong SVG cũng hoạt động trong FF4 + và mang lại kết quả tốt hơn:

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

Với css:

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

Thêm một lưu ý nữa là IE10 không hỗ trợ "bộ lọc: màu xám:" trong chế độ tuân thủ tiêu chuẩn nữa, do đó cần chuyển đổi chế độ tương thích trong các tiêu đề để hoạt động:

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

Cách đơn giản nhất để đạt được thang độ xám với CSS là thông qua thuộc filtertính.

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

Tài sản vẫn chưa được hỗ trợ đầy đủ và vẫn yêu cầu -webkit-filtertài sản hỗ trợ trên tất cả các trình duyệt.

Không giống như có thể (chưa), ngay cả với các thuộc tính CSS3 hoặc độc quyền -webkit-hoặc -moz-CSS.

Tuy nhiên, tôi đã tìm thấy bài đăng này từ tháng 6 năm ngoái đã sử dụng các bộ lọc SVG trên HTML. Không có sẵn trong bất kỳ trình duyệt hiện tại nào (bản demo gợi ý về bản dựng WebKit tùy chỉnh), nhưng rất ấn tượng như một bằng chứng về khái niệm.

Đối với những người đang hỏi về hỗ trợ IE10 + bị bỏ qua trong các câu trả lời khác, hãy kiểm tra đoạn CSS này:

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

Áp dụng trên đánh dấu này:

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

Để biết thêm các bản demo, hãy kiểm tra phần Đồ họa CSS3 của IE testdrive và blog IE cũ này http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Trong Internet Explorer sử dụng thuộc tính bộ lọc.

Trong webkit và Firefox hiện tại không có cách nào để loại bỏ hình ảnh chỉ bằng CSS. vì vậy bạn sẽ cần sử dụng canvas hoặc SVG cho giải pháp phía máy khách.

Nhưng tôi nghĩ sử dụng SVG là thanh lịch hơn. kiểm tra bài đăng trên blog của tôi để biết giải pháp SVG hoạt động cho cả Firefox và webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Và nói đúng ra vì SVG là HTML, giải pháp hoàn toàn là html + css :-)

Một cách mới để làm điều này đã có sẵn một thời gian trên các trình duyệt hiện đại.

chế độ trộn nền cho phép bạn có được một số hiệu ứng thú vị và một trong số đó là chuyển đổi thang độ xám

Độ sáng giá trị , được đặt trên nền trắng, cho phép nó. (di chuột để xem nó màu xám)

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

Độ sáng được lấy từ hình ảnh, màu sắc được lấy từ nền. Vì nó luôn luôn là màu trắng, không có màu.

Nhưng nó cho phép nhiều hơn nữa.

Bạn có thể làm động các thiết lập hiệu ứng 3 lớp. Cái đầu tiên sẽ là hình ảnh, và cái thứ hai sẽ là một gradient trắng đen. Nếu bạn áp dụng chế độ hòa trộn nhân cho điều này, bạn sẽ nhận được kết quả màu trắng như trước trên phần trắng, nhưng hình ảnh gốc trên phần màu đen (nhân với màu trắng cho màu trắng, nhân với màu đen không có hiệu lực.)

Trên phần màu trắng của gradient, bạn có được hiệu ứng như trước. Trên phần màu đen của gradient, bạn đang trộn hình ảnh lên chính nó và kết quả là hình ảnh không được chỉnh sửa.

Bây giờ, tất cả những gì cần thiết là di chuyển gradient để có hiệu ứng động này: (di chuột để xem nó có màu)

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>

tài liệu tham khảo

ma trận tương thích

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

Có lẽ cách này giúp bạn

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

w3schools.org

Thực tế sẽ dễ dàng hơn với IE nếu tôi nhớ chính xác bằng cách sử dụng thuộc tính CSS độc quyền. Hãy thử điều này FILTER: Graytừ http://www.ssi-developer.net/css/visual-filters.shtml

Phương pháp của Axe chỉ đơn giản là làm cho hình ảnh trong suốt và có nền đen phía sau nó. Tôi chắc rằng bạn có thể tranh luận đây là thang độ xám.

Mặc dù bạn không muốn sử dụng Javascript, tôi nghĩ bạn sẽ phải sử dụng nó. Bạn cũng có thể sử dụng ngôn ngữ phía máy chủ để làm điều đó.

Nếu bạn sẵn sàng sử dụng Javascript, thì bạn có thể sử dụng canvas để chuyển đổi hình ảnh sang thang độ xám. Vì Firefox và Safari hỗ trợ <canvas>, nó sẽ hoạt động.

Vì vậy, tôi đã googled "canvas grayscale", và kết quả đầu tiên là http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html có vẻ hiệu quả.

hỗ trợ cho các bộ lọc CSS gốc trong webkit đã được thêm từ phiên bản hiện tại 19.0.1084.46

so -webkit-filter: grayscale (1) sẽ hoạt động và dễ dàng hơn phương pháp SVG cho webkit ...

Đây là một mixin cho LESS sẽ cho phép bạn chọn bất kỳ độ mờ nào. Tự điền vào các biến cho CSS đơn giản ở các tỷ lệ khác nhau.

Gợi ý gọn gàng ở đây , nó sử dụng loại bão hòa cho ma trận, do đó bạn không cần phải làm bất cứ điều gì lạ mắt để thay đổi tỷ lệ phần trăm.

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

Sau đó sử dụng nó:

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

Bạn không cần sử dụng quá nhiều tiền tố để sử dụng đầy đủ, bởi vì nếu bạn chọn tiền tố cho firefox cũ, bạn không cần sử dụng tiền tố cho firefox mới.

Vì vậy, để sử dụng đầy đủ, sử dụng đủ mã này:

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

Để bổ sung cho câu trả lời của người khác, có thể làm bão hòa hình ảnh một nửa trên FF mà không phải đau đầu về ma trận của SVG :

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

Đâu $vlà giữa 0và 1. Nó tương đương với filter:grayscale(50%);.

Ví dụ trực tiếp:

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

Tham khảo về MDN

Dựa trên câu trả lời của robertc :

Để có được chuyển đổi phù hợp từ hình ảnh màu sang hình ảnh thang độ xám thay vì sử dụng ma trận như thế này:

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

Bạn nên sử dụng ma trận chuyển đổi như thế này:

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

Điều này sẽ hoạt động tốt cho tất cả các loại hình ảnh dựa trên mô hình RGBA (đỏ-lục-lam-alpha).

Để biết thêm thông tin lý do tại sao bạn nên sử dụng ma trận tôi đã đăng nhiều khả năng một trong những kiểm tra của robertc liên kết sau:

• Độ chói và tín hiệu chênh lệch màu
• Câu trả lời của Margus cho câu hỏi: "greyscalevalue in colorvalue" phần @stackoverflow: Chỉnh sửa 2: @Hans Passant
• Charles A. Bouman - Đại học Purdue - Truyền hình analog trang 20 & 21
• Và ở đây bạn có thể tìm thấy một số mã C # và VB

Một giải pháp khủng khiếp nhưng khả thi: kết xuất hình ảnh bằng cách sử dụng đối tượng Flash, sau đó cung cấp cho bạn tất cả các biến đổi có thể có trong Flash.

Nếu người dùng của bạn đang sử dụng các trình duyệt mới nhất và nếu Firefox 3.5 và Safari 4 hỗ trợ nó (tôi không biết là có / sẽ), bạn có thể điều chỉnh thuộc tính cấu hình màu CSS của hình ảnh, đặt nó thành ICC thang độ xám URL hồ sơ. Nhưng đó là rất nhiều nếu!

được Một thay thế cho trình duyệt cũ hơn có thể để mặt nạ sử dụng được sản xuất bởi các yếu tố giả hoặc thẻ inline.

Định vị tuyệt đối di chuột một img (hoặc vùng văn bản không cần nhấp cũng không chọn) có thể bắt chước chặt chẽ các hiệu ứng của thang màu, thông qua rgba () hoặc png translucide .

Nó sẽ không cho một thang màu duy nhất, nhưng sẽ tô màu ngoài phạm vi.

thử nghiệm trên bút mã với 10 màu khác nhau thông qua phần tử giả, cuối cùng là màu xám. http://codepen.io/gcyrillus/pen/nqpDd (tải lại để chuyển sang hình ảnh khác)

Bạn có thể sử dụng một trong các chức năng của jFunc - sử dụng chức năng "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-fifts.aspx

Hãy thử plugin jquery này. Mặc dù, đây không phải là một giải pháp HTML và CSS thuần túy, nhưng nó là một cách lười biếng để đạt được những gì bạn muốn. Bạn có thể tùy chỉnh thang độ xám của mình để phù hợp nhất với cách sử dụng của bạn. Sử dụng nó như sau:

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

Có một bản demo tương tác . Bạn có thể chơi xung quanh với nó.

Kiểm tra các tài liệu về việc sử dụng, nó là khá đơn giản. tài liệu

Đối với thang độ xám theo phần trăm trong Firefox, thay vào đó , hãy sử dụng bộ lọc bão hòa : (tìm kiếm 'bão hòa')

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"

Nếu bạn hoặc ai đó gặp phải vấn đề tương tự trong tương lai sẽ mở cho PHP. (Tôi biết bạn đã nói HTML / CSS, nhưng có lẽ bạn đã sử dụng PHP trong phần phụ trợ) Đây là một giải pháp PHP:

Tôi đã nhận nó từ thư viện PHP GD và thêm một số biến để tự động hóa quy trình ...

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

?>