有沒有辦法使用JavaScript將PNG的白色背景轉換爲透明背景？

我有一堆只有黑色文字在白色背景上的.png。到現在爲止，這些都已經顯示在屏幕上的白色背景上，所以沒有問題;但現在，我正在改變背景的顏色。問題在於，當設置爲灰白背景時，文本看起來有點偏離，所以我很想知道JavaScript（jQuery是否正常）能夠將.png的白色背景轉換爲透明背景。我對不是感興趣，這個問題的服務器端解決方案（例如，一個腳本可以在所有圖像中運行，並通過圖像庫以編程方式執行），剪切圖像數量可以實現手動操作不切實際的。有沒有辦法使用JavaScript將PNG的白色背景轉換爲透明背景？

有誰知道一種方法來做到這一點？搜索沒有透露任何東西。請注意，我是而不是正在尋找IE .png修復程序！

如果有辦法，與這樣的過程相關的開銷是多少？

感謝您的幫助！

來源

2011-01-13 Josh Leitzel

雖然它可能是有辦法做到這一點，可能使用特定瀏覽器的功能，這是不值得的。只需找到一個將批量轉換的應用程序。 ImageMagick的命令行實用程序可能有一些讓你前進的東西。 – 2011-01-13 15:47:34

謝謝Brian。我想它可能會歸結爲那，但我想先探索我的選擇。 – 2011-01-13 15:49:34

我能想到的最接近的事情是IE特定的，有一個色度過濾器，可能能夠做你想做的事情（有點像藍屏，有什麼東西藍色將是透明的，在你的情況下，任何白色都是透明的）......參見：http://www.ssi-developer.net/css/visual-filters.shtml。在其他瀏覽器和CSS3中沒有找到任何等價物。

創建一個腳本可能會查找文檔中的所有圖像，將其替換爲畫布元素，在畫布上繪製圖像，逐像素地瀏覽圖像數據，如果像素是某些顏色，將其alpha改爲0（透明）。

這是一個關於該概念的快速POC ... 您需要在網絡服務器上運行此工具以使其可以在Chrome上工作，它可以在IE9測試版上本地運行。

只需將圖像更改爲任何帶有一些純白色RGB（255,255,255）的圖像即可。這將使圖像通過設置它的alpha通道透明的任何白色像素爲0

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 
     body { background-color: #00f; margin: 0px; padding: 0px; } 
    </style> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    </head> 
    <body> 
    <img src="test.png"> 
    <img src="test.png"> 
    </body> 
    <script type="text/javascript"> 
    $(function() { 
     $("img").each(function() { 
     var $this = $(this); 
     var tim = $this.get(0); 
     var idx = $this.index(); 

     var canvas = null; 
     var ctx = null; 

     var img = new Image(); 
     img.onload = function() { 
      copyImageToCanvas(img); 
     }; 
     img.setAttribute("src", tim.src); 

     function copyImageToCanvas(aImg) { 
      canvas = document.createElement("canvas"); 

      var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth; 
      var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight; 

      canvas.id = "img" + idx; 
      canvas.width = w; 
      canvas.height = h; 

      $this.replaceWith(canvas); 

      ctx = canvas.getContext("2d"); 
      ctx.clearRect(0, 0, w, h);  
      ctx.drawImage(aImg, 0, 0); 

      makeTransparent(aImg); 
     } 

     function makeTransparent(aImg) { 

      var w = typeof aImg.naturalWidth == "undefined" ? aImg.width : aImg.naturalWidth; 
      var h = typeof aImg.naturalHeight == "undefined" ? aImg.height : aImg.naturalHeight; 
      var imageData = ctx.getImageData(0, 0, w, h); 

      for (var x = 0; x < imageData.width; x++) 
      for (var y = 0; y < imageData.height; y++) { 
       var offset = (y * imageData.width + x) * 4; 
       var r = imageData.data[offset]; 
       var g = imageData.data[offset + 1]; 
       var b = imageData.data[offset + 2]; 

       //if it is pure white, change its alpha to 0    
       if (r == 255 && g == 255 && b == 255) 
       imageData.data[offset + 3] = 0; 
      }; 

      ctx.putImageData(imageData, 0, 0); 
     } 
     }); 
    }); 
    </script> 
</html>

來源

2011-01-13 22:04:53

我知道的js圖像處理的唯一選擇是Pixastic，它沒有你想要的功能。你必須這樣做，據我所知，服務器端

來源

2011-01-13 15:57:06 nunopolonia

如果你在服務器端執行它，你可以只用AJAX來返回新的圖像，這樣你就不會收到整頁的回覆。 – 2011-01-13 22:10:26

有沒有辦法使用JavaScript將PNG的白色背景轉換爲透明背景？

回答

相關問題