CSS 또는 JavaScript에서 이미지 색상 반전

CSS 또는 JavaScript에서 이미지 색상 반전

---

가능한 경우 CSS 또는 JavaScript에서 이미지 (jpg / png ..)의 색상을 어떻게 반전합니까?

이전의 관련 질문은 충분한 세부 정보를 제공하지 않습니다.

---

CSS3에는 새로운 필터 속성이 있습니다. 웹킷 브라우저에서만 작동합니다. 웹킷 브라우저 및 Firefox에서 지원 됩니다. IE 또는 Opera mini에서는 지원되지 않습니다.

img {
   -webkit-filter: invert(1);
   filter: invert(1);
   }

<img src="http://i.imgur.com/1H91A5Y.png">

---

아래 코드를 사용하여 새로운 주요 브라우저에서 수행 할 수 있습니다.

.img {
    -webkit-filter:invert(100%);
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

그러나 모든 브라우저에서 작동하려면 Javascript를 사용해야합니다. 이 요점 과 같은 것이 그 일을 할 것입니다.

---

자바 스크립트를 통해 스타일을 적용 할 수 있습니다. 이것은 ID가 theImage 인 이미지에 필터를 적용하는 아래의 Js 코드입니다.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

그리고 이것은

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png"></img>

이제해야 할 일은 invert ()를 호출하는 것뿐입니다. 이미지를 클릭하면이 작업을 수행합니다.

function invert(){
document.getElementById("theImage").style.filter="invert(100%)";
}

<h4> Click image to invert </h4>

<img id="theImage" class="img-responsive" src="http://i.imgur.com/1H91A5Y.png" onClick="invert()" ></img>

우리는 우리 웹 사이트에서 이것을 사용합니다.

---

0에서 1 로의 반전을 위해 IE 10에 대한 지원을 제공하는 InvertImages 라이브러리를 사용할 수 있습니다 . IE 11에서도 테스트했으며 제대로 작동합니다.

참고 URL : https://stackoverflow.com/questions/13325798/invert-colors-of-an-image-in-css-or-javascript