Есть ли способ использовать JavaScript для преобразования белого фона PNG в прозрачный фон? - PullRequest
Новая
       26

Есть ли способ использовать JavaScript для преобразования белого фона PNG в прозрачный фон?

3 голосов
/ 13 января 2011

У меня есть куча .pngs, которые имеют только черный текст на белом фоне.До сих пор все они отображались на белом фоне на экране, поэтому проблем не было;но теперь я меняю цвет фона.Проблема в том, что текст выглядит немного не так, как на не совсем белом фоне, поэтому мне интересно знать, способен ли JavaScript (с jQuery) преобразовать белый фон .png в прозрачный фон на лету.Я не заинтересован в решении этой проблемы на стороне сервера (например, сценарий, который запускает все изображения и делает это программно с библиотекой изображений), а число сдвигов изображений заставляет это делатьРучной подход нецелесообразен.

Кто-нибудь знает способ сделать это?Поиск ничего не показал.Обратите внимание, что я не ищу исправление IE .png!

Если есть способ, какие издержки будут связаны с таким процессом?

Спасибо залюбая помощь!

Ответы [ 2 ]

6 голосов
/ 14 января 2011

Самая близкая вещь, которую я могу подумать, специфична для IE, есть фильтр цветности, который может делать то, что вы хотите (вроде синего экрана, где все, что синий будет прозрачным, в вашем случае, все, что белый будет прозрачным). ) ... см .: http://www.ssi -developer.net / css / visual-filters.shtml . Не найдено ни одного эквивалента для этого ни в других браузерах, ни в CSS3.

Может быть возможно создать скрипт, который будет искать все изображения в документе, заменить его элементом canvas, нарисовать изображение на холсте, пройти данные изображения пиксель за пикселем, и если пиксель имеет определенный цвет, измените его альфа на 0 (прозрачный).

Вот краткий обзор этой концепции ... Вам нужно запустить его на веб-сервере, чтобы он работал на Chrome & FF, он может работать локально на бета-версии IE9.

Просто измените изображение на что-нибудь с каким-нибудь чистым белым RGB (255, 255, 255). Он сделает любой белый пиксель в изображении прозрачным, установив его альфа-канал на 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 голосов
/ 13 января 2011

Единственная опция, которую я знаю для обработки изображений js, - это Pixastic , и она не имеет нужной вам функции.Вы должны сделать это на стороне сервера, насколько я знаю

...