1

我想屏蔽 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>

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

4

4 回答 4

2

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

您将画布大小设置为 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

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

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>
于 2013-03-07T19:59:21.323 回答
1

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

像素操作教程

于 2013-03-07T12:24:06.507 回答
0

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

于 2020-07-09T07:27:52.887 回答
-2

据了解，JPEG 没有透明度选项。你需要使用PNG或者你必须从下面填充虚拟透明内容

于 2013-03-07T12:21:50.900 回答