在具有透明背景的单色PNG图像上更改/覆盖颜色？

Question

我希望能够做的是简单地通过输入所需的颜色代码来动态地将纯色单色png更改为另一种颜色，而不会丢失透明背景。我看到的实现往往有点草率，所以我想知道是否有人可以就如何实现它给我建议。

我最熟悉PHP解决方案，但Python也可以工作，我甚至会采用一个很好的画布解决方案。关于这一点的任何建议/例子将非常感谢，谢谢你们。

Answer 1

这是一个简单的画布实现：

colorize = function(image, r, g, b) {

    var newImg = $('<canvas>')[0];
    newImg.width = image.width;
    newImg.height = image.height;
    var newCtx = newImg.getContext('2d');
    newCtx.drawImage(image, 0, 0);

    var imageData = newCtx.getImageData(0, 0, image.width, image.height);
    data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i+0] = r;
        data[i+1] = g;
        data[i+2] = b;
    }
    newCtx.putImageData(imageData, 0, 0);

    return newImg;
};

JSFiddle：http://jsfiddle.net/bK7P9/6/

Answer 2

您可以使用Python中的PIL和numpy执行此操作。假设我们有一个方法NewSolidImage（我们将在下面定义），我们可以将图像转换为像素数组，使用该方法转换像素，然后保存到新文件：

import numpy
from PIL import Image

def CreateNewImage(current_filename, new_filename, new_color):
  image = Image.open(current_filename)
  image_values = numpy.array(image)

  new_image_values = NewSolidImage(image_values, new_color)
  new_image = Image.fromarray(new_image_values)

  new_image.save(new_filename)

现在定义此方法。我们只需要一个数组，确保它是我们期望的形状，然后在不是100％透明的像素上，我们将红色，绿色，蓝色值设置为传入的实体。

def NewSolidImage(rgba_array, new_color):
  new_r, new_g, new_b = new_color

  rows, cols, rgba_size = rgba_array.shape
  if rgba_size != 4:
    raise ValueError('Bad size')

  for row in range(rows):
    for col in range(cols):
      pixel = rgba_array[row][col]
      transparency = pixel[3]
      if transparency != 0:
        new_pixel = pixel.copy()
        new_pixel[0] = new_r
        new_pixel[1] = new_g
        new_pixel[2] = new_b

        rgba_array[row][col] = new_pixel

  return rgba_array

Answer 3

通常我喜欢在RGB颜色空间中工作，但这是HLS工作得非常好的情况。 Python中的转换很简单，通过替换H和S并使L保持不变。

import colorsys
from PIL import Image

def recolor(im, r, g, b):
    h, l, s = colorsys.rgb_to_hls(r/255.0, g/255.0, b/255.0)
    result = im.copy()
    pix = result.load()
    for y in range(result.size[1]):
        for x in range(result.size[0]):
            r2, g2, b2, a = pix[x, y]
            h2, l2, s2 = colorsys.rgb_to_hls(r2/255.0, g2/255.0, b2/255.0)
            r3, g3, b3 = colorsys.hls_to_rgb(h, l2, s)
            pix[x, y] = (int(r3*255.99), int(g3*255.99), int(b3*255.99), a)
    return result

recolor(im_flag, 255, 0, 0).save(r'c:\temp\red_flag.png')