How to make color of PNG image transparent

[User137]

Just tried this quickly, seems to work fine on Windows 7 32-bit, and somewhat new Lazarus. It saves both BMP and PNG. There is clear difference in their file size, and both show alpha channel in Gimp too, PNG also in Windows Photo viewer and explorer.

Code: [Select]

TForm1 = class(TForm)
    ..
  private
    bmp: TBitmap;
  end;
..
procedure TForm1.FormCreate(Sender: TObject);
var i, j, n: integer; data: PByte;
    pic: TPicture;
begin
  randomize;
  bmp:=TBitmap.Create;
  bmp.PixelFormat:=pf32bit;
  bmp.SetSize(256, 256);
  data:=bmp.RawImage.Data;
  for i:=0 to 255 do
    for j:=0 to 255 do begin
      n:=(j*256+i)*4;
      data[n+0]:=0;   // B
      data[n+1]:=255; // G
      data[n+2]:=0;   // R
      data[n+3]:=i*2 mod 256; // A
    end;
  bmp.SaveToFile('tmp.bmp');

  pic:=TPicture.Create;
  pic.Assign(bmp);
  pic.SaveToFile('tmp.png');
  pic.Free;
end;

procedure TForm1.FormDestroy(Sender: TObject);
begin
  bmp.Free;
end;

procedure TForm1.FormPaint(Sender: TObject);
begin
  canvas.Clear;
  canvas.Draw(0, 0, bmp);
end;

[widoman]

User137,  you rule man

This code work , the PNG is transparent in google-earth

THANK YOU 

[widoman]

  Two observations

• If alpha=0 in transparent color (this case clWhite)
  the PNG show white background in google-earth and transparent vertical lines (clFuchsia) in photoeditor
  
• If alpha is not set to 255 in all others colors
  the PNG its 100% transparent without pixels colored

One last error with this code
the image is cropped .. i guess "n" its wrong calculated

The final code

Code: [Select]

procedure TfGrid.CrearPng(FileName: String; Transparency: TColor);
var
  screen: TBitmap;
  pic: TPicture;
  data: PByte;
  i, j, n: integer;
begin
  screen := CrearBitmap(fGrid);
  data:= screen.RawImage.Data;
  for i:=0 to screen.Width-1 do
  begin
    for j:=0 to screen.Height-1 do
    begin
      n:=(j*screen.Height + i)*4;
      data[n+3]:= 255;//Alpha
      if(RGBToColor(data[n+2], data[n+1], data[n+0])=Transparency)then
        data[n+3]:= 1;//Alpha
    end;
  end;
  pic:=TPicture.Create;
  pic.Assign(screen);
  pic.SaveToFile(FileName);
  pic.Free;
end;

function TfGrid.CrearBitmap(pControl : TCustomControl):TBitmap;
var
  bmp: TBitmap;
  r: TRect;
begin
  r:= Rect(0, 0, pControl.ClientWidth, pControl.ClientHeight);
  bmp:= TBitmap.Create;
  bmp.PixelFormat:=pf32bit;
  bmp.SetSize(pControl.ClientWidth, pControl.ClientHeight);
  bmp.Canvas.CopyRect(r, pControl.Canvas, r);
  result:= bmp;
end;             


[User137]

You should change the Fuchsia to some other color too, like black or white. It was purple in original picture only to show clearly, but now you want to hide it. So here:

Code: [Select]

if (RGBToColor(data[n+2], data[n+1], data[n+0])=Transparency) then begin
  data[n+0]:=0;
  data[n+1]:=0;
  data[n+2]:=0;
  data[n+3]:=1; // or 0 ...
end;

[widoman]

User137, you misunderstood what i want:

• draw white filled rectangles with border clFuchsia in the form
• selected rectangles will have different color (fill clLime)
• create bitmap capturing the form
• save bitmap has png making white color transparent
• open the png in google-earth to view has "grid" over the map

I cant figure why the png is cropped ??
the bottom rectangles are incomplete like the image was sliced

[User137]

Wouldn't it be a Google earth image size limitation? If so, image file itself could not change it... Can you load fullscreen non-transparent image that goes under the cropped part?

[widoman]

User137, the problem not is google-earth

The problem is in Lazarus when create PNG
bmp is 1152x808 => correct image, grid lines and white bakcground
png is 1152x808 => some grid lines disappear (transparent)

[User137]

I can't reproduce. This is 2048x2048 transparent fuschia grid between every 100 pixels. Both bmp and png are showing fine in Gimp.

Code: [Select]

procedure TForm1.FormCreate(Sender: TObject);
var i, j, n: integer; data: PByte;
    pic: TPicture;
begin
  randomize;
  bmp:=TBitmap.Create;
  bmp.PixelFormat:=pf32bit;
  bmp.SetSize(2048, 2048);
  data:=bmp.RawImage.Data;
  for i:=0 to 2047 do
    for j:=0 to 2047 do begin
      n:=(j*2048+i)*4;
      if (i mod 100=0) or (j mod 100=0) then begin
        data[n+0]:=255; // B
        data[n+1]:=0;   // G
        data[n+2]:=255; // R
        data[n+3]:=255; // A
      end else begin
        data[n+0]:=255; // B
        data[n+1]:=255; // G
        data[n+2]:=255; // R
        data[n+3]:=0;   // A
      end;
    end;
  bmp.SaveToFile('d:\netti\tmp.bmp');

  pic:=TPicture.Create;
  pic.Assign(bmp);
  pic.SaveToFile('d:\netti\tmp.png');
  pic.Free;
end;By the way, such image could also be created manually using MsPaint for grid and editing with Gimp for making it tranparent.

edit: This code could be problem:

Code: [Select]

n:=(j*screen.Height + i)*4;It seems this is right, when i tested with non square image:

Code: [Select]

n:=(j*screen.Width + i)*4;

[widoman]

User137, this is working THANK YOU  this is the end

Observations

• The color clFuchsia for lines and clLime for selected rectangles do not affect, i test change both colors without different result
• I have to leave 1 row without changing Alpha to work, if i dont do this the PNG its not transparent have white background
• Like you say "n" was wrong calculated
• I take another approach to understand the code and manipulate "data"

The final code

Code: [Select]

procedure TfGrid.CrearPng(FileName: String; Transparency: TColor);
var
  screen: TBitmap;
  pic: TPicture;
  data: PByte;
  i, j, n: integer;
begin
  screen := CrearBitmap(fGrid);
  data:= screen.RawImage.Data;
  for i:=0 to screen.Height-1 do
  begin
    for j:=0 to screen.Width-1 do
    begin
      if(i>0)then begin
        n:=(i*screen.Width + j)*4;
        data[n+3]:= 255;//Alpha
        if(RGBToColor(data[n+2], data[n+1], data[n+0])=Transparency)then
          data[n+3]:= 1;//Alpha
      end;
    end;
  end;
  pic:=TPicture.Create;
  pic.Assign(screen);
  pic.SaveToFile(FileName);
  pic.Free;
end;