将图像转换为黑色和amp; 透明（可绘制） - JavaScriptCSS

Question

例子 - http:/prntscr.comsmgkpt

我想把右图这样的图片转换成左图。基本上就是把它变成透明的，保持黑色边框。

(像儿童画册)

有什么办法可以用JSCSS实现吗？

Answer 1

用css最接近的方法可能是 filter: grayscale(100%) 并加入一些对比度和饱和度的滤镜。

.two{
   filter:grayscale(100%) contrast(2000%) saturate(2000%) ;
}

<img class="one" src="https://www.desicomments.com/wp-content/uploads/2017/02/Donald-Duck-Wearing-Blue-Cap.jpg" alt="Pineapple" width="300" height="300">
<img class="two" src="https://www.desicomments.com/wp-content/uploads/2017/02/Donald-Duck-Wearing-Blue-Cap.jpg" alt="Pineapple" width="300" height="300">

Answer 2

你可以通过滤镜的组合得到这条线的东西

img {
    filter: grayscale(100%) brightness(350%) contrast(10000%);
}

<img src="https://i.stack.imgur.com/HO8EQ.png">