遮蔽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圖像的白色區域

回答

相關問題