Coloring a PNG image

Targets
1

I’m looking to manage the color of a PNG file by code. I have a folder black PNG file and I want to change it’s color by code red, blue, etc…

2

If it’s a black line PNG with a transparent background this should do it:

  1. Draw png into same size picture with white background
  2. Draw picture with the colour you want the line to be
  3. Apply the first png to the second png with ApplyMask

The second picture should now be your lineicon in the desired colour.

3

Sorry @Tim_Parnell I don’t really understand your solution.

My image is like this

folder
folder512×512 2.72 KB

Can you wrote some code to change the black color to blue, red, etc. ?

4

Here’s a sample project to help you get started.
Note that this will only work with black source icons.

Colourizer.xojo_xml_project (7kb)

5

You can use rgbsurface.transform to do the job too.
It allows for a bit of flex


dim rmap(255) as integer
dim bmap(255) as integer
dim gmap(255) as integer

for y as integer = 0 to 255
  rmap(y) = y
  gmap(y) = y
  bmap(y) = y
next

dim newcolor as color = &cff1010
      rmap(0) =  newcolor.red
      bmap(0) = newcolor.blue
      gmap(0) = newcolor.green

//if you have greys at the edges, you might extend this to 
      'rmap(1) =  newcolor.red
     ' bmap(1) = newcolor.blue
     ' gmap(1) = newcolor.green

      'rmap(2) =  newcolor.red
     ' bmap(2) = newcolor.blue
      'gmap(3) = newcolor.green

//swap black for red
copyofblackimage.rgbsurface.transform rmap(),gmap(),bmap()
6

And don’t forget the simple but slow way:

dim rgb as rgbsurface
dim newcolor as color = &cFF0000
rgb = theimage.rgbsurface
for y as integer = 0 to theimage.height
for x as integer = 0 to theimage.width
if rgb.pixel(x,y).value < 0.1 then rgb.pixel(x,y) = newcolor
next
next
7

I usually do it with picture.systemImage.

var p as picture = picture.systemImage("", dblSize, picture.systemImageWeights.regular, color.RGB(255, 0, 0), yourPicture)
  • dblSize is the size of the picture, try 20 or 100 to see if there is a difference in the result
  • color.RGB(255, 0, 0) is the color you want to have as the result
  • yourPicture is your Picture you want to change
8

It seems to be an iOS solution only

9

Thank you everybody for your help ^^

Here is my final solution

Var iconMask As Picture = ImgFolder
Var coloredIcon As New Picture(iconMask.Width, iconMask.Height)

// Your desired line color
coloredIcon.Graphics.DrawingColor = &cff5555
coloredIcon.Graphics.FillRectangle(0, 0, iconMask.Width, iconMask.Height)

// Apply the mask
coloredIcon.ApplyMask(iconMask)

// Draw Picture
g.DrawPicture(coloredIcon, 0, (g.Height - 16) \ 2, 16, 16, 0, 0, coloredIcon.Width, coloredIcon.Height)

As you can see I store my image in the my project and name it ImgFolder.

I thing you can close this topic