CSS 필터 : 투명한 흰색으로 컬러 이미지 만들기

Question 1

투명도가있는 컬러 png 이미지가 있습니다. css 필터를 사용하여 전체 이미지를 흰색으로 만들고 투명도는 그대로 둡니다. CSS에서 가능합니까?

Question 2

당신이 사용할 수있는

filter: brightness(0) invert(1);

코드 스 니펫 표시

html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

<p>
  Original:
  <img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>

Expand snippet

먼저 brightness(0)투명한 부분을 제외한 모든 이미지를 검게 만듭니다.

그런 다음 invert(1)검정색 부분을 흰색으로 만듭니다.

Question 3

내가 아는 한, 슬프게도 요소를 색상 화하는 CSS 필터가 없습니다 (아마도 SVG 필터 마법을 사용하는 경우가 있지만 익숙하지 않음). 그렇지 않은 경우에도 필터는 기본적으로 다음에서만 지원됩니다. 웹킷 브라우저.

그래도 여전히이 문제를 해결하고를 사용 canvas하여 이미지를 수정할 수 있습니다. 기본적으로 캔버스에 이미지 요소를 그린 다음 픽셀을 반복하여 각 RGBA 값을 원하는 색상으로 수정할 수 있습니다.

그러나 캔버스에는 몇 가지 제한이 있습니다. 가장 중요한 것은 이미지 src가 페이지와 동일한 도메인에 있는지 확인해야한다는 것입니다. 그렇지 않으면 브라우저에서 캔버스의 픽셀 데이터를 읽거나 수정할 수 없습니다.

여기의 JSFiddle JSFiddle 로고의 색상을 변경가.

//Base64 source, but any local source will work
var src = "data:image/png;base64,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";
var canvas = document.getElementById("theCanvas");
var ctx = canvas.getContext("2d");
var img = new Image;

//wait for the image to load
img.onload = function() {
    //Draw the original image so that you can fetch the colour data
    ctx.drawImage(img,0,0);
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    /*
    imgData.data is a one-dimensional array which contains 
    the respective RGBA values for every pixel 
    in the selected region of the context 
    (note i+=4 in the loop)
    */
    
    for (var i = 0; i < imgData.data.length; i+=4) {
			imgData.data[i] = 255; //Red, 0-255
			imgData.data[i+1] = 255; //Green, 0-255
			imgData.data[i+2] = 255; //Blue, 0-255
			/* 
			imgData.data[i+3] contains the alpha value
			which we are going to ignore and leave
			alone with its original value
			*/
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the original image
    ctx.putImageData(imgData, 0, 0); //paint the new colorised image
}

//Load the image!
img.src = src;

body {
    background: green;
}

<canvas id="theCanvas"></canvas>

스 니펫 확장