Question

我有一堆.pngs，在白色背景上只有黑色文字。到目前为止，这些都已经显示在屏幕上的白色背景上，所以没有问题;但现在，我正在改变背景的颜色。问题是，当设置在灰白背景下时，文本看起来有点偏，所以我很想知道JavaScript（jQuery是否正常）是否能够将.png的白色背景转换为透明背景。我不对此问题的服务器端解决方案感兴趣（例如，运行所有图像的脚本并使用图像库以编程方式执行）并且图像的剪切数量使得操作双手接近不切实际。

有谁知道这样做的方法？搜索没有透露任何信息。请注意，我不正在寻找IE .png修复程序！

如果有办法，那么这个过程会产生什么开销？

感谢您的帮助！

Answer 1

我能想到的最接近的是IE特定的，有一个色度滤镜可能能够做你想要的（有点像蓝色屏幕，任何蓝色都是透明的，在你的情况下，任何白色都是透明的）...见：http://www.ssi-developer.net/css/visual-filters.shtml。在其他浏览器和CSS3中都没有找到任何相同的内容。

有可能创建一个脚本来查找文档中的所有图像，用画布元素替换它，在画布上绘制图像，逐个像素地浏览图像数据以及像素是否是某个像素颜色，将其alpha值更改为0（透明）。

这是关于这个概念的快速POC ...... 您需要在Web服务器中运行它才能在Chrome＆amp; FF，它可以在IE9 beta上本地运行。

只需将图像更改为任何带有纯白色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>

Answer 2

我知道js图像处理的唯一选项是Pixastic，它没有你想要的功能。据我所知，你必须做服务器端

有没有办法使用JavaScript将PNG的白色背景转换为透明背景？

2 个答案: