遮蔽JPEG图像的白色区域

我想在JPEG图像中遮盖白色（R：255，G：255，B：255）的全部区域，因此在浏览器中查看白色区域时，我会看到底下（这些区域将是透明的）。我不介意使用JQuery，CSS 3或Canvas，无论如何实现这一点。由于遮蔽JPEG图像的白色区域

OK，代码：

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

此代码似乎做的工作，但我得到的是全白的区域一些零散的白点。

来源

2013-03-07 Idan Shechter

不可能.......... – Liam 2013-03-07 12:21:27

:) - 确定的答案？ – 2013-03-07 12:21:54

在Photoshop中打开它们，删除区域，另存为PNG。 – hjpotter92 2013-03-07 12:23:41

你的代码看起来相当正确的，但我会建议这些变化：

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

来源

2013-03-07 19:59:21 markE

当我使用canvas.width - imageObj.width （相同的高度），它不再清除白色像素，图像保持不变，任何想法为什么（我删除那些线，它再次删除它们） – 2013-03-08 06:56:54

我发布了完整的代码，适合我。 **请确保您的图像源位于本地域**，否则您将遇到安全违规并且图像将被绘制，但白色像素不会变为透明。所以这不起作用：http://otherDomain.com/picture.jpg – markE 2013-03-08 16:25:51

-2

据知道JPEGs没有透明度选项。您需要使用PNG，或者您必须从下面填充虚拟透明内容

来源

2013-03-07 12:21:50 wegus

这个问题不是OP要求的。他希望以编程方式获取jpeg数据并为其中一些像素创建遮罩。 – 2013-03-07 12:25:43

应该有一个转换，但基于图像是JPEG – 2013-03-07 12:26:33

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

Tutorial for pixel manipulation

来源

2013-03-07 12:24:06 Imperative

看起来像一个有趣的领导！ – 2013-03-07 12:27:27

这将是令人难以置信的处理器密集？说真的，只需将透明胶片保存为.PNG图像即可。 “重新发明”和“轮子”弹簧的心想 – Liam 2013-03-07 13:00:41

我测试了上面的代码，并且这个工作非常快 – 2013-03-07 16:20:33

遮蔽JPEG图像的白色区域

回答

相关问题