使用CSS剪切PNG图像 [英] Silhouette a PNG image using CSS

问题描述

任何人都知道一种方法，我可以得到CSS，使一个具有透明度的PNG图像完全变黑了像剪影？

Anyone know of a way that I can get CSS to make a PNG image with transparency look completely blacked out like a silhouette?

换句话说 -
从这样的东西：

In other words- Going from something like this:

至此：

这是很多图片，这是为什么我想避免通过Photoshop做。

It's for a lot of images which is why I'd like to avoid doing it via Photoshop.

推荐答案

我试过这个代码使用画布，也许你可以细化特别是在苹果内的较轻像素上

I tried this code that uses a canvas, maybe you could refine it especially on lighter pixel inside the apple

<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>

这篇关于使用CSS剪切PNG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！