어두운 이미지의 Greyscale SVG 필터의 불쌍한 결과

StackOverflow https://stackoverflow.com/questions/19846999

  •  29-07-2022
  •  | 
  •  

문제

Greyscale SVG 필터를 어두운 이미지에 적용하면 결과에서 상당한 밴딩을 얻습니다. 내가 사용하는 필터는 다음과 같습니다.

     <!doctype html>
     <html>
     <head>
     <style>
      img {
     filter: url(#grayscale); /* Firefox */     
     filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Webkit */
    }
      img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }
       </style>
    </head>
  <body>
  <img src="http://www.walldoze.com/static/cache/2048x2048/hd-wallpapers-space-iphone-  wallpaper-retina-2048x2048-wallpaper.jpg" width="1000">
  <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale" >
 <feColorMatrix type="matrix"  values="0.3333 0.3333 0.3333 0 0.001 0.3333 0.3333 0.3333 0 0.001 0.3333 0.3333 0.3333 0 0.001 0 0 0 1 0.001"/>
  </filter>
  </svg>
  </body>
  </html>

enter image description here

도움이 되었습니까?

해결책

더 나은 성능을 얻으려면 필터 속성에서 "SRGB"로 Color-Interpolation 필터 속성을 설정할 수 있습니다.

<filter id="greyscale" color-interpolation-filters="sRGB">
  <feColorMatrix type="saturate" values="0"/>
</filter>

컬러 interpolation filters는 Safari에서 지원되지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top