HTML / CSS에서 이미지를 회색조로 변환

컬러 비트 맵을 회색조로 표시하는 간단한 방법이 HTML/CSS있습니까?

IE 호환 가능 할 필요는 없으며 FF3 및 / 또는 Sf3에서 작동하면 충분합니다.

나는 SVGCanvas와 Canvas 로 모두 할 수 있다는 것을 알고 있지만 지금은 많은 일처럼 보입니다.

이것을하는 정말로 게으른 사람의 방법이 있습니까?

CSS 필터에 대한 지원은 Webkit에 포함되었습니다. 이제 브라우저 간 솔루션이 생겼습니다.

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은 어떻습니까?

회색 과 같은 폴리 필을 사용할 수 있습니다 .

에 이어 brillout.com의 대답은 , 또한 로마 Nurik의 대답은 , 다소하여 '더 SVG의 요구 사항을 완화, 당신은 단지 하나의 SVG 파일과 일부 CSS를 사용하여 파이어 폭스에서 이미지를 채도 수 있습니다.

SVG 파일은 다음과 같습니다.

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

resources.svg로 저장하면 그레이 스케일로 변경하려는 모든 이미지에 대해 지금부터 재사용 할 수 있습니다.

CSS에서는 Firefox 특정 filter속성을 사용하여 필터를 참조합니다 .

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

원하는 경우 MS 독점 제품을 추가하고 그레이 스케일로 변환하려는 모든 이미지에 해당 클래스를 적용하십시오 (Firefox> 3.5, IE8에서 작동) .

편집 : 여기에 설명 filter된 SVG 접근 방식과 함께 SalmanPK의 답변에 새로운 CSS3 속성을 사용하는 방법을 설명 하는 멋진 블로그 게시물 이 있습니다. 이 접근법을 사용하면 다음과 같은 결과가 나타납니다.

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

추가 브라우저 지원 정보는 여기에 있습니다 .

Firefox의 경우 filter.svg 파일을 만들 필요가 없으며 data URI scheme을 사용할 수 있습니다 .

첫 번째 답변의 CSS 코드를 가져 와서 다음을 제공합니다.

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"문자열을 파일 인코딩으로 바꾸십시오.

브라우저는 두 번째 HTTP 요청을 수행 할 필요가 없으므로이 방법은 다른 방법보다 빠릅니다.

업데이트 : IE10 및 IE11 용 JavaScript polyfill을 포함한 전체 GitHub 저장소로 만들었습니다 : https://github.com/karlhorky/gray

원래 SalmanPK의 답변을 사용 했지만 SVG 파일에 필요한 추가 HTTP 요청을 제거하기 위해 아래 변형을 만들었습니다. 인라인 SVG는 Firefox 버전 10 이상에서 작동하며 10보다 낮은 버전은 더 이상 글로벌 브라우저 시장의 1 %를 차지하지 않습니다.

그 이후 로이 블로그 게시물 에서 솔루션을 계속 업데이트 하여 색상으로 페이딩 지원, SVG로 IE 10/11 지원 및 데모에서 부분 회색조를 추가했습니다.

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를 사용할 수 있으면이 스크립트가 원하는 것일 수 있습니다. 크로스 브라우저에서 작동하며 지금까지 잘 작동합니다. 다른 도메인에서로드 된 이미지에는 사용할 수 없습니다.

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

오늘도 같은 문제가 발생했습니다. 처음에는 SalmanPK 솔루션을 사용 했지만 FF와 다른 브라우저마다 효과가 다르다는 것을 알았습니다. 이는 변환 매트릭스가 Chrome / IE의 필터와 같은 밝기에서만 작동하기 때문입니다. 놀랍게도 SVG의 대안적이고 간단한 솔루션도 FF4 +에서 작동하고 더 나은 결과를 생성한다는 것을 알았습니다.

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

CSS로 :

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

또 하나의 경고는 IE10이 표준 호환 모드에서 더 이상 "필터 : 회색 :"을 지원하지 않으므로 작동하려면 헤더에서 호환 모드 스위치가 필요하다는 것입니다.

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

CSS만으로 그레이 스케일을 달성하는 가장 간단한 방법은 filter속성 을 이용하는 것 입니다.

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

이 속성은 여전히 ​​완전히 지원되지 않으며 -webkit-filter모든 브라우저에서 지원하기 위해 속성이 필요 합니다.

CSS3 또는 독점 -webkit-또는 -moz-CSS 속성을 사용 하더라도 가능하지 않은 것처럼 보입니다 .

그러나 지난 6 월부터 HTML에서 SVG 필터를 사용하는 이 게시물을 찾았 습니다 . 현재 브라우저에서는 사용할 수 없지만 (사용자 정의 WebKit 빌드에서 시연 한 데모) 개념 증명으로 매우 인상적입니다.

다른 답변에서 무시 된 IE10 + 지원에 대해 묻는 사람들은 다음 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;
}

이 마크 업에 적용 :

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

더 많은 데모를 보려면 IE testdrive의 CSS3 그래픽 섹션 과이 오래된 IE 블로그 http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx를 확인하십시오.

Internet Explorer에서 필터 속성을 사용하십시오.

웹킷 및 Firefox에서는 현재 CSS만으로 이미지를 desatuarte 할 수있는 방법이 없습니다. 따라서 클라이언트 측 솔루션에 캔버스 또는 SVG를 사용해야합니다.

그러나 SVG를 사용하는 것이 더 우아하다고 생각합니다. Firefox 및 웹킷 모두에서 작동하는 SVG 솔루션에 대한 내 블로그 게시물을 확인하십시오. http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

SVG는 HTML이기 때문에 엄밀히 말하면 솔루션은 순수한 html + css입니다 :-)

최신 브라우저에서이 작업을 수행하는 새로운 방법이 한동안 사용되었습니다.

백그라운드 블렌드 모드를 사용하면 흥미로운 효과를 얻을 수 있으며 그 중 하나는 회색조 변환입니다.

흰색 배경에 설정된 광도 값으로 허용됩니다. (회색으로 보시려면 마우스를 올리세요)

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

광도는 이미지에서 가져오고 색상은 배경에서 가져옵니다. 항상 흰색이므로 색상이 없습니다.

그러나 훨씬 더 많은 것을 허용합니다.

효과 설정 3 레이어에 애니메이션을 적용 할 수 있습니다. 첫 번째 이미지는 이미지이고 두 번째 이미지는 흰색-검정색 그라디언트입니다. 여기에 곱하기 혼합 모드를 적용하면 흰색 부분에서는 이전과 같이 흰색 결과가 나타나지만 검은 부분의 원래 이미지 (흰색을 곱하면 흰색이되고 검은 색을 곱해도 효과가 없음)

그라디언트의 흰색 부분에서는 이전과 동일한 효과를 얻습니다. 그라디언트의 검은 부분에서 이미지 자체를 블렌딩하고 결과는 수정되지 않은 이미지입니다.

이제 필요한 것은 그라디언트를 움직여이 효과를 동적으로 만드는 것입니다. (색상으로 가리키면됩니다)

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>

참고

호환성 매트릭스

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

어쩌면이 방법은 당신을 도울 수

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

w3schools.org

독점 CSS 속성을 올바르게 사용하는 것을 기억하면 실제로 IE를 사용하는 것이 더 쉽습니다. http://www.ssi-developer.net/css/visual-filters.shtmlFILTER: Gray 에서 시도 하십시오.

Ax 의 방법은 단순히 이미지를 투명하게 만들고 그 뒤에 검은 배경을 갖습니다. 나는 이것이 회색조라고 주장 할 수 있다고 확신합니다.

Javascript를 사용하고 싶지는 않지만 Javascript를 사용해야한다고 생각합니다. 서버 측 언어를 사용하여이를 수행 할 수도 있습니다.

Javascript를 사용하려는 경우 캔버스를 사용하여 이미지를 회색조로 변환 할 수 있습니다. Firefox 및 Safari 지원 이후<canvas> 하므로 작동해야합니다.

그래서 "canvas grayscale"을 봤는데 첫 번째 결과는 http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html 이며 작동하는 것 같습니다.

웹킷의 기본 CSS 필터에 대한 지원이 현재 버전 19.0.1084.46에서 추가되었습니다.

따라서 -webkit-filter : grayscale (1)이 작동하며 웹킷에 대한 SVG 방식보다 쉽습니다

다음은 불투명도를 선택할 수있는 LESS의 믹스 인입니다. 일반 CSS의 변수를 다른 비율로 직접 채우십시오.

깔끔한 힌트 는 매트릭스에 포화 유형을 사용하므로 백분율을 변경하기 위해 멋진 작업을 수행 할 필요가 없습니다.

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

그런 다음 사용하십시오.

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

오래된 파이어 폭스에 프리픽스를 선택하면 새로운 파이어 폭스에 프리픽스를 사용할 필요가 없기 때문에 완전히 사용하기 위해 너무 많은 프리픽스를 사용할 필요는 없습니다.

따라서 완전히 사용하려면이 코드를 충분히 사용하십시오.

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

다른 답변에 대한 보완으로 SVG의 매트릭스 두통 없이 FF에서 이미지의 절반을 채도 감소시킬 수 있습니다.

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

어디 $v사이에 0하고 1. 와 같습니다 filter:grayscale(50%);.

라이브 예 :

.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에 대한 참조

robertc의 답변을 바탕으로 :

다음과 같은 행렬을 사용하는 대신 컬러 이미지에서 회색조 이미지로 올바르게 변환 하려면 :

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

다음과 같이 변환 행렬을 사용해야합니다.

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

RGBA (red-green-blue-alpha) 모델을 기반으로하는 모든 유형의 이미지에 적합합니다.

매트릭스를 사용해야하는 이유에 대한 자세한 내용을 보려면 robertc의 다음 링크를 확인하십시오.

• 휘도 및 색차 신호
• 질문에 대한 Margus의 답변 : "회색 값의 회색조 값"@stackoverflow 부분 : 편집 2 : @Hans Passant
• Charles A. Bouman-Purdue University-아날로그 TV 페이지 20 및 21
• 여기 C # 및 VB 코드가 있습니다.

끔찍하지만 실행 가능한 솔루션 중 하나 : Flash 객체를 사용하여 이미지를 렌더링하면 Flash에서 가능한 모든 변형이 가능합니다.

만약 사용자 출혈 가장자리 브라우저와를 사용하는 경우 파이어 폭스 3.5, 사파리 4를 지원 그것 (내가 알고하지 않습니다 중 하나를 할 / 것), 당신은 CSS를 조정할 수있는 컬러 프로파일 그레이 스케일 ICC로 설정, 이미지의 속성을 프로필 URL. 그러나 그것은 많은 경우입니다!

수 오래된 브라우저를위한 대안 의사 요소 나 인라인 태그에 의해 생성 된 사용 마스크 수 있습니다.

절대 위치 지정은 img (또는 텍스트 영역에서 클릭이나 선택이 필요하지 않음)를 가리키면 rgba () 또는 translucide png를 통해 색상 스케일의 효과를 밀접하게 모방 할 수 있습니다. .

하나의 단일 색상 스케일을 제공하지 않지만 범위를 벗어난 색상을 음영 처리합니다.

의사 요소를 통해 10 가지 색상으로 코드 펜에서 테스트하십시오. 마지막은 회색입니다. http://codepen.io/gcyrillus/pen/nqpDd (다른 이미지로 전환하려면 새로 고침)

jFunc의 기능 중 하나를 사용할 수 있습니다. "jFunc_CanvasFilterGrayscale"기능을 사용하십시오. http://jfunc.com/jFunc-functions.aspx

이 jquery 플러그인을 사용해보십시오. 이것은 순수한 HTML 및 CSS 솔루션은 아니지만 원하는 것을 달성하는 게으른 방법입니다. 용도에 맞게 그레이 스케일을 사용자 정의 할 수 있습니다. 다음과 같이 사용하십시오.

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

대화식 데모가 있습니다. 당신은 그것으로 놀 수 있습니다.

사용법에 대한 문서를 확인하십시오. 매우 간단합니다. 문서

Firefox에서 그레이 스케일을 백분율로 표시하는 경우 포화 필터를 대신 사용하십시오 ( '포화'검색).

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"

당신이나 미래에 비슷한 문제에 직면 한 사람이 PHP에 열려 있다면. (HTML / CSS를 말했지만 백엔드에서 이미 PHP를 사용하고있을 것입니다.) 다음은 PHP 솔루션입니다.

PHP GD 라이브러리에서 가져 와서 프로세스를 자동화하는 변수를 추가했습니다 ...

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

?>