HTML/CSS에서 이미지를 그레이스케일로 변환
로 표시하는 간단한 방법이 있나요?HTML/CSS?
IE와 호환될 필요는 없습니다. FF3 및/또는 Sf3에서 작동한다면 저에게는 충분합니다.
는 을 둘 다 할 수 것을 .SVGCanvas, 하지만 지금은 일이 많은 것 같아요.
정말 게으른 사람의 방법이 있을까요?
CSS 필터에 대한 지원이 웹킷에 상륙했습니다.이제 크로스 브라우저 솔루션을 사용할 수 있습니다.
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="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">인터넷 익스플로러 10은 어떻습니까?
회색처럼 폴리 필을 사용할 수 있습니다.
brillout.com 의 답변과 Roman Nurik의 답변에 이어 'SVG 없음' 요구 사항을 다소 완화하면 단일 SVG 파일과 일부 CSS만 사용하여 Firefox에서 이미지를 소멸시킬 수 있습니다.
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에서 CSS와 파이어폭스를 합니다.filter속성:
.target {
filter: url(resources.svg#desaturate);
}
원한다면 MS 고유의 것도 추가하고 그레이스케일로 변환할 이미지에 해당 클래스를 적용합니다(파이어폭스 > 3.5, IE8에서 작동).
편집: 여기 새로운 CSS3 사용을 설명하는 멋진 블로그 게시물이 있습니다.filter여기에 설명된 SVG 접근법과 일치하는 SalmanPK의 답변에 있는 속성.이러한 접근 방식을 사용하면 다음과 같은 결과를 얻을 수 있습니다.
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 파일을 생성할 필요가 없으며 데이터 URI 방식을 사용할 수 있습니다.
첫 번째 답의 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 폴리필을 포함한 전체 GitHub repo로 만들었습니다. 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%);
}
으로 사용하여 하는 가장 간단한 방법은 CSS를 입니다.filter소유물.
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
이 속성은 여전히 완전히 지원되지 않으며 여전히 다음이 필요합니다.-webkit-filter모든 브라우저에서 지원할 수 있는 속성입니다.
JavaScript를 사용할 수 있는 경우 이 스크립트가 원하는 것일 수 있습니다.그것은 브라우저를 통해 작동하며 지금까지 저에게 잘 작동하고 있습니다.다른 도메인에서 로드된 이미지에는 사용할 수 없습니다.
http://james.padolsey.com/demos/grayscale/
오늘도 똑같은 문제가 생겼어요.처음에 살만PK 솔루션을 사용했지만 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이 표준 준수 모드에서 "filter: gray:"를 더 이상 지원하지 않기 때문에 작동하려면 헤더의 호환성 모드 스위치가 필요하다는 것입니다.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
이를 위한 새로운 방법은 현재 현대 브라우저에서 한동안 사용할 수 있습니다.
background-mode를 사용하면 몇 가지 흥미로운 효과를 얻을 수 있으며 그 중 하나는 그레이스케일 변환입니다.
흰색 배경에 설정된 값의 광도가 이를 허용합니다.(회색으로 보기가 쉽지 않음)
.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>인 CSS3로도할 것 -webkit-또는-moz-CSS 속.
하지만 HTML에 SVG 필터를 사용한 지난 6월의 이 게시물을 발견했습니다.현재 브라우저에서는 사용할 수 없지만(데모에서는 사용자 지정 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("#filtersPicture")" 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 테스트 드라이브의 CSS3 그래픽 섹션과 이 오래된 IE 블로그 http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx 를 확인하십시오.
Internet Explorer에서 필터 속성을 사용합니다.
웹킷과 파이어폭스에서는 현재 CSS로만 이미지를 사멸시킬 수 있는 방법이 없습니다.따라서 클라이언트 솔루션에는 캔버스 또는 SVG를 사용해야 합니다.
하지만 SVG를 사용하는 것이 더 우아하다고 생각합니다.파이어폭스와 웹킷 모두에서 작동하는 SVG 솔루션에 대한 블로그 게시물을 확인하십시오. http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
그리고 엄밀히 말하면 SVG는 HTML이기 때문에 솔루션은 순수한 html+css입니다 :-)
어쩌면 이 방법이 당신을 도울지도 모릅니다.
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
만약 내가 독점적인 CSS 속성을 사용하는 것을 정확하게 기억한다면 IE로 그것을 하는 것이 사실 더 쉽습니다.사용해 보세요.FILTER: Grayhttp://www.ssi-developer.net/css/visual-filters.shtml 에서
Ax의 방법은 단순히 이미지를 투명하게 만들고 배경이 검은색입니다.저는 당신이 이것이 그레이스케일이라고 주장할 수 있다고 확신합니다.
자바스크립트를 사용하고 싶지 않으셨겠지만, 사용하셔야 할 것 같습니다.서버 사이드 언어를 사용하여 이 작업을 수행할 수도 있습니다.
Javascript를 사용하려면 캔버스를 사용하여 이미지를 그레이스케일로 변환할 수 있습니다.는 Firefox를 하므로 "Safari"입니다.<canvas> 거예요
그래서 저는 "grayscale"을 구글에 검색했고, 첫 번째 결과는 효과가 있는 것처럼 보이는 http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html 이었습니다.
웹킷의 네이티브 CSS 필터에 대한 지원이 현재 버전 19.0.1084.46에서 추가되었습니다.
so -webkit-filter: 그레이스케일(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" />
에▁where디$v에 사이에 .0그리고.1▁toent에 해당합니다.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>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) 모델에 기반한 모든 유형의 이미지에 대해 잘 작동합니다.
왜 당신이 매트릭스를 사용해야 하는지에 대한 자세한 정보를 위해, 나는 Robert의 원 체크 링크를 게시했습니다.
- 휘도 및 색상 차이 신호
- 질문에 대한 Margus의 대답: "색상 값의 회색 스케일 값" @stackoverflow 부분: 편집 2: @Hans Passant
- 찰스 A.부만 - 퍼듀 대학 - 아날로그 TV 20페이지 & 21페이지
- 그리고 여기에서 몇 가지 C# 및 VB 코드를 찾을 수 있습니다.
이전 브라우저에서는 유사 요소 또는 인라인 태그로 생성된 마스크를 사용할 수 있습니다.
절대 위치 지정 호버 img(또는 클릭이나 선택이 필요 없는 텍스트 영역)는 rgba() 또는 translucide png을 통해 색상 척도의 효과를 가깝게 모방할 수 있습니다.
단일 색상 척도를 제공하지 않고 범위를 벗어난 색상을 음영 처리합니다.
코드 펜에서 의사-스캐너를 통해 10가지 다른 색상으로 테스트, 마지막은 회색입니다. http://codepen.io/gcyrillus/pen/nqpDd (다른 이미지로 전환할 수 없음)
끔찍하지만 실행 가능한 솔루션 중 하나는 플래시 개체를 사용하여 이미지를 렌더링하는 것입니다. 그러면 플래시에서 가능한 모든 변환이 제공됩니다.
사용자가 최첨단 브라우저를 사용하고 있고 Firefox 3.5 및 Safari 4가 지원하는 경우(둘 중 하나인지는 모르겠습니다) 이미지의 CSS 컬러 프로파일 특성을 조정하여 그레이스케일 ICC 프로파일 URL로 설정할 수 있습니다.하지만 그것은 많은 경우입니다!
jFunc의 기능 중 하나를 사용할 수 있습니다 - "jFunc_CanvasFilterGrayscale" 함수 http://jfunc.com/jFunc-functions.aspx 를 사용합니다.
이 jquery 플러그인을 사용해 보십시오.하지만, 이것은 순수한 HTML과 CSS 솔루션은 아니지만, 당신이 원하는 것을 달성하는 게으른 방법입니다.사용 용도에 가장 적합하도록 회색 스케일을 사용자 지정할 수 있습니다.다음과 같이 사용합니다.
$("#myImageID").tancolor();
대화형 데모가 있습니다.가지고 놀 수 있습니다.
사용 설명서를 확인하십시오. 매우 간단합니다. 문서
파이어폭스에서 그레이스케일(%)의 경우 대신 포화 필터를 사용합니다. ('포화' 검색)
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);
?>
언급URL : https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
'programing' 카테고리의 다른 글
| 이 예외를 어떻게 잡습니까? (0) | 2023.06.05 |
|---|---|
| 사용자 클릭 선택 구성 요소가 있는 동적 탭 (0) | 2023.05.31 |
| 기본 안드로이드 빌드에 대응하지 못했습니다.SDK 위치를 찾을 수 없음 (0) | 2023.05.31 |
| 루비에서 두 Date 개체 사이의 일 수를 어떻게 찾을 수 있습니까? (0) | 2023.05.31 |
| 인스턴스화 시 VB.NET Dictionary에 값을 삽입하는 방법은 무엇입니까? (0) | 2023.05.31 |