HTML / CSS에서 이미지를 회색조로 변환
회색조로 색상 비트 맵을 표시하는 간단한 방법이 HTML/CSS있습니까?
IE와 호환 될 필요는 없습니다 (그렇지 않을 것이라고 생각합니다). FF3 및 / 또는 Sf3에서 작동한다면 저에게 충분합니다.
저는 SVG캔버스 와 둘 다로 할 수 있다는 것을 알고 있지만 지금은 많은 작업을하는 것 같습니다.
이것을하는 정말 게으른 사람의 방법이 있습니까?
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 파일을 만들 필요가 없으며 데이터 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 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은 더 이상 표준 호환 모드에서 "filter : gray :"를 지원하지 않으므로 헤더에서 호환 모드 전환이 필요하다는 것입니다.
<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 속성을 사용해도 가능하지 않은 것 같습니다 (아직) .
그러나 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 testdrive의 CSS3 그래픽 섹션 과이 오래된 IE 블로그 http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx를 확인하십시오.
Internet Explorer에서 필터 속성을 사용합니다.
웹킷과 파이어 폭스에서는 현재 CSS만으로 이미지를 삭제하는 방법이 없습니다. 따라서 클라이언트 측 솔루션으로 캔버스 또는 SVG를 사용해야합니다.
하지만 SVG를 사용하는 것이 더 우아하다고 생각합니다. Firefox와 웹킷 모두에서 작동하는 SVG 솔루션에 대한 내 블로그 게시물을 확인하십시오. http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
그리고 엄밀히 말하면 SVG는 HTML이기 때문에 해결책은 순수한 html + css입니다 :-)
이를 수행하는 새로운 방법은 현재 최신 브라우저에서 얼마 동안 사용할 수 있습니다.
background-blend-mode를 사용하면 흥미로운 효과를 얻을 수 있으며 그중 하나는 그레이 스케일 변환입니다.
흰색 배경에 설정된 luminosity 값 은이를 허용합니다. (회색으로 보려면 마우스 오버)
.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%);
}
It's in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from http://www.ssi-developer.net/css/visual-filters.shtml
The method by Ax simply makes the image transparent and has a black background behind it. I'm sure you could argue this is grayscale.
Although you didn't want to use Javascript, I think you'll have to use it. You could also use a server side language to do it.
If you're willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support <canvas>, it should work.
So I googled "canvas grayscale", and the first result was http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html which seems to work.
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...
Here's a mixin for LESS that will let you choose any opacity. Fill in the variables yourself for plain CSS at different percentages.
Neat hint here, it uses the saturate type for the matrix so you don't need to do anything fancy to change the percentage.
.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);
}
Then use it:
img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}
You don't need use so many prefixes for full use, because if you choose prefix for old firefox, you don't need use prefix for new firefox.
So for full use, enough use this code:
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%);
}
Based on robertc's answer:
To get proper conversion from colored image to grayscale image instead of using matrix like this:
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
You should use conversion matrix like this:
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
This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.
For more information why you should use matrix I posted more likely that the robertc's one check following links:
- The luminance and colour difference signals
- Margus's answer for question: "greyscalevalue in colorvalue" @stackoverflow part: Edit 2: @Hans Passant
- Charles A. Bouman - Purdue university - Analog TV page 20 & 21
- And here you can find some C# and VB codes
As a complement to other's answers, it's possible to desaturate an image half the way on FF without SVG's matrix's headaches:
<feColorMatrix type="saturate" values="$v" />
Where $v is between 0 and 1. It's equivalent to filter:grayscale(50%);.
Live example:
.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>One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.
If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I don't know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But that's a lot of if's!
be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags.
Absolute positionning hover an img (or text area wich needs no click nor selection) can closely mimic effects of color scale , via rgba() or translucide png .
It will not give one single color scale, but will shades color out of range.
test on code pen with 10 different colors via pseudo-element, last is gray . http://codepen.io/gcyrillus/pen/nqpDd (reload to switch to another image)
You can use one of the functions of jFunc - use the function "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
Try this jquery plugin. Although, this is not a pure HTML and CSS solution, but it is a lazy way to achieve what you want. You can customize your greyscale to best suit your usage. Use it as follow:
$("#myImageID").tancolor();
There's an interactive demo. You can play around with it.
Check out the documentation on the usage, it is pretty simple. docs
For grayscale as a percent in Firefox, use saturate filter instead: (search for '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"
If you, or someone else facing a similar problem in future are open to PHP. (I know you said HTML/CSS, but maybe you are already using PHP in the backend) Here is a PHP solution:
I got it from the PHP GD library and added some variable to automate the process...
<?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
'Development Tip' 카테고리의 다른 글
| git init를 실행 취소하는 명령이 있습니까? (0) | 2020.10.02 |
|---|---|
| git repo 브랜치에서 pip 설치 (0) | 2020.10.02 |
| Xcode에서 여러 줄을 어떻게 들여 쓰나요? (0) | 2020.10.02 |
| 비동기 작업을 어떻게 실행합니까? (0) | 2020.10.02 |
| MVC에서 문자열 결과를 어떻게 반환합니까? (0) | 2020.10.02 |