Question

我想掩盖JPEG图像中的总白色（R：255，G：255，B：255）区域，因此当在浏览器中查看时，在总白色区域中，我将看到下面的区域（这些区域将是是透明的）。我不介意使用JQuery，CSS 3或Canvas，无论如何都可以实现这一点。感谢

好的，代码：

<body style="background-color:red;">
  <canvas id="myCanvas" width="228" height="454"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = 0;
        var y = 0;
        var width = 228;
        var height = 454;
        var imageObj = new Image();

        imageObj.onload = function () 
        {
            context.drawImage(imageObj, x, y, width, height);

            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            var imgData = ctx.getImageData(0, 0, width, height);
            var pixels = imgData.data; // get pixel data

            for (var i = 0; i < pixels.length; i +=4)
            {
                var r = pixels[i ];
                var g = pixels[i + 1]
                var b = pixels[i  + 2];

                if (r === 255 && g === 255 && b === 255) {
                    pixels[i + 3] = 1;
                }   
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.putImageData(imgData, 0, 0);
        };
        imageObj.src = 'img/test_image.jpg';
    </script>
  </body>

此代码似乎可以完成这项工作，但我在该区域中得到一些分散的白点，这是完全白色的。

Answer 1

您的代码看起来相当正确，但我建议您进行以下更改：

您将画布大小设置为228x454，但如果您的图像略微大小不同，则在将其绘制到画布时，可能会意外缩放源图像。因此，将画布缩放到图像大小：

imageObj.onload=function(){
canvas.width=imageObj.width;   // be sure canvas is *exactly* image sized to prevent 
canvas.height=imageObj.height; // accidental scaling which might skew pixel colors

将“透明”像素设置为1时，应将它们设置为0以获得完全透明：

pixels[i+3]=0;      // 0 instead of 1 for pure transparency

你只是掩盖纯白色 - rgb（255,255,255）。图像中的某些像素可能“几乎”为白色，因此您也可以尝试屏蔽一些近白色像素。

var nearWhite=250;  // try experimenting with different “near white” values
if(r>nearWhite && g>nearWhite && b>nearWhite)

[编辑：提供完整代码]

这是代码（适用于我的电脑）。

确保您的图片来源位于您的本地网域，否则您将遇到安全违规行为并且图片将会被绘制，但白色像素将不会变为透明。所以没有http://otherDomain.com/picture.jpg！

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function () {

        canvas.width=imageObj.width;
        canvas.height=imageObj.height;
        ctx.drawImage(imageObj, 0,0);

        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixels = imgData.data; // get pixel data
        for (var i = 0; i < pixels.length; i +=4)
        {
            var r = pixels[i ];
            var g = pixels[i + 1]
            var b = pixels[i  + 2];

            if (r>250 && g>250 && b>250) {
                pixels[i + 3] = 0;
                count++;
            }   
        }
        ctx.putImageData(imgData, 0, 0);
    }
    imageObj.src="car.jpg";

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

可能会创建一个画布并使用图像中的相应值填充像素值。如果像素为白色rgb(255,255,255)，则将alpha设置为1.不确定这是否可行，只是一个想法。

Tutorial for pixel manipulation

Answer 3

有一种解决方案可将alpha通道添加到现有JPEG图像并在浏览器中呈现：https://jim.studt.net/jpeg-alpha/。

Answer 4

据我所知，JPEG不具备透明度选项。您需要使用PNG，或者必须从

下面填写虚拟透明内容

屏蔽JPEG图像的白色区域

4 个答案: