使用CSS勾勒PNG图像的轮廓

有人知道一种方法，我可以让CSS使一个透明的PNG图像看起来像一个剪影一样完全黑了吗

换言之— 从这样的角度：

为此：

---

它适用于很多图像，这就是为什么我不想通过Photoshop来实现它。

我不知道如何使用纯css来实现它。JavaScript也许能够实现它，但是你可以考虑使用服务器端编程来代替。使用php，您可以在服务器上复制原始png，并用单一颜色替换不透明像素。这类似于水印功能。

我尝试了这个使用画布的代码，也许你可以改进它，尤其是在苹果内部较轻的像素上

<img id="canvasSource" src="apple.jpg" />

<br />

<canvas id="area" width="264" height="282"></canvas>

<!-- Javascript Code -->
<script type="text/javascript">
    window.onload = function() {
        var canvas = document.getElementById("area");
        var context = canvas.getContext("2d");
        var image = document.getElementById("canvasSource");
        context.drawImage(image, 0, 0);

        var imgd = context.getImageData(0, 0, 264, 282);
        var pix = imgd.data;
        var blackpixel = 21;
           for (var i = 0, n = pix.length; i < n; i += 4) {

            //console.log(pix[i], pix[i+1], pix[i+2]);
            if (i > 3) {
               if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
                   (Math.abs(pix[i-2] - pix[i+1]) > 10) &&
                   (Math.abs(pix[i-1] - pix[i+2]) > 10)
                ) {

                   pix[i  ] = blackpixel;  
                   pix[i+1] = blackpixel;  
                   pix[i+2] = blackpixel;

               }
            }
            else {
               if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
                  pix[i  ] = blackpixel;  
                  pix[i+1] = blackpixel;  
                  pix[i+2] = blackpixel;
               }
         }

        }
        context.putImageData(imgd, 0, 0);       

    };
</script>

window.onload=函数（）{
var canvas=document.getElementById（“区域”）；
var context=canvas.getContext（“2d”）；
var image=document.getElementById（“canvasSource”）；
drawImage（image，0,0）；
var imgd=context.getImageData（0,0264282）；
var pix=imgd.data；
var-blackpixel=21；
对于（变量i=0，n=pix.length；i3）{
if（（数学绝对值（pix[i-3]-pix[i]）>10）&&
（数学abs（pix[i-2]-pix[i+1]）>10）&&
（数学abs（pix[i-1]-pix[i+2]）>10）
) {
pix[i]=黑像素；
pix[i+1]=黑色像素；
pix[i+2]=黑像素；
}
}
否则{
if（pix[i]<250&&pix[i+1]<250&&pix[i+2]<250）{
pix[i]=黑像素；
pix[i+1]=黑色像素；
pix[i+2]=黑像素；
}
}
}
putImageData（imgd，0,0）；
};

您可以应用图像样式，如

过滤器：对比度（0%）亮度（50%）

以获得轮廓。不要忘记前缀。

现在，将过滤器组合到混合模式也可以做到：

span{/*用于在img上放置“混合器遮罩”*/
位置：相对位置；
显示：内联块；
溢出：隐藏；
}
span-img{
显示：块；/*擦除间隙*/
最大宽度：45vw；
滤镜：对比度（150%）；
}
span+span img{
滤镜：对比度（120%）饱和（0%）；/*饱和（0%）与灰度（100%）相似*/
}
跨度：之前{
内容：''；
z指数：1；
身高：100%；
背景：白色；
位置：绝对位置；
排名：0；
宽度：100%；
显示：块；
滤镜：对比度（10000%）亮度（0）饱和（100%）灰度（100%）；
混合模式：颜色燃烧；/*烘焙至黑色*/
动画：span 2s无限交替；
}
@关键帧跨度{
从{
转换：转换（-100%，0）
}
25%,50% {
变换：平移（0,0）；
}
到{
转换：转换（100%，0）
}
}

我很确定这是“CSS做不到”的例子之一。你只需要进入Photoshop（其实很简单，不应该超过两分钟：）你能想出一种通过JavaScript的方法吗？这是为我的一个班级的学生准备的，我们只是在处理客户端代码——因此，虽然我可以用PHP GD解决这个问题，但我正在尝试找到一个适用于我们使用的技术的解决方案。Susan，我找不到任何不依赖服务器处理的方法。如果你创建了一个解决方案，请在这里发布一个链接。Rad解决方案，fcalderan！只需添加var blackpixel=0；（仅供偶然发现此代码的人员参考）。