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

发布于 2024-10-11 13:08:19 字数 363 浏览 4 评论 0原文

我有一堆 .png，除了白色背景上的黑色文本之外什么都没有。到目前为止，这些都在屏幕上以白色背景显示，所以没有出现任何问题；但现在，我正在改变背景的颜色。问题是，当设置为灰白色背景时，文本看起来有点偏离，所以我有兴趣知道 JavaScript（jQuery 很好）是否能够将 .png 的白色背景即时转换为透明背景。我对这个问题的服务器端解决方案不感兴趣（例如，运行所有图像并使用图像库以编程方式执行此操作的脚本），并且图像的剪切数量使之成为可能手工方法不切实际。

有谁知道有什么方法可以做到这一点？搜索并没有发现任何东西。请注意，我不是正在寻找 IE .png 修复！

如果有办法的话，与此过程相关的开销是多少？

感谢您的帮助！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

缺⑴份安定 2024-10-18 13:08:19

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

可以创建一个脚本来查找文档中的所有图像，将其替换为画布元素，在画布上绘制图像，逐像素地遍历图像数据，如果像素具有某种颜色，则更改其 alpha 为 0（透明）。

这是关于该概念的快速 POC...
您需要在网络服务器中运行它才能在 Chrome 和 Chrome 上运行。 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>

The closest thing I can think is IE specific, there is a chroma filter that might be able to do what you want (sort of like blue screen, where anything blue will be transparent, in your case, anything white will be transparent)... see: http://www.ssi-developer.net/css/visual-filters.shtml. Haven't find any equivalent for this in other browsers, nor in CSS3.

It might be possible to create a script that look for all images in the document, replace it with a canvas element, paint the image on the canvas, go through the image data pixel by pixel and if the pixel is of a certain color, change its alpha to 0 (transparent).

Here is a quick POC on that concept...
You need to run this in a web server for it to work on Chrome & FF, it can run locally on IE9 beta.

Just change the image to anything with some pure white RGB(255, 255, 255) in it. It will make any white pixel in the image transparent by setting its alpha channel to 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>

回复收藏 0 原文