* * *

Author Topic: How to make color of PNG image transparent  (Read 6492 times)

User137

  • Hero Member
  • *****
  • Posts: 1348
    • Nxpascal home
Re: How to make color of PNG image transparent
« Reply #15 on: February 06, 2013, 12:13:04 am »
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;
Win7, FPC and Lazarus 32-bit SVN version.

widoman

  • New member
  • *
  • Posts: 14
Re: How to make color of PNG image transparent
« Reply #16 on: February 06, 2013, 03:05:55 am »
User137,  ;D you rule man

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

THANK YOU  :D
« Last Edit: February 06, 2013, 11:43:20 pm by widoman »

widoman

  • New member
  • *
  • Posts: 14
Re: How to make color of PNG image transparent
« Reply #17 on: February 06, 2013, 04:08:12 am »
 ::) 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;             
« Last Edit: February 07, 2013, 12:03:08 am by widoman »

User137

  • Hero Member
  • *****
  • Posts: 1348
    • Nxpascal home
Re: How to make color of PNG image transparent
« Reply #18 on: February 06, 2013, 05:03:43 am »
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;
Win7, FPC and Lazarus 32-bit SVN version.

widoman

  • New member
  • *
  • Posts: 14
Re: How to make color of PNG image transparent
« Reply #19 on: February 06, 2013, 08:26:31 am »
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
« Last Edit: February 07, 2013, 06:40:11 pm by widoman »

User137

  • Hero Member
  • *****
  • Posts: 1348
    • Nxpascal home
Re: How to make color of PNG image transparent
« Reply #20 on: February 06, 2013, 09:47:28 am »
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?
Win7, FPC and Lazarus 32-bit SVN version.

widoman

  • New member
  • *
  • Posts: 14
Re: How to make color of PNG image transparent
« Reply #21 on: February 06, 2013, 06:56:53 pm »
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)
« Last Edit: February 07, 2013, 06:32:35 pm by widoman »

User137

  • Hero Member
  • *****
  • Posts: 1348
    • Nxpascal home
Re: How to make color of PNG image transparent
« Reply #22 on: February 06, 2013, 07:30:51 pm »
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;
« Last Edit: February 06, 2013, 07:38:52 pm by User137 »
Win7, FPC and Lazarus 32-bit SVN version.

widoman

  • New member
  • *
  • Posts: 14
Re: How to make color of PNG image transparent
« Reply #23 on: February 06, 2013, 11:30:09 pm »
User137, this is working THANK YOU  ;D 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;               
« Last Edit: February 07, 2013, 06:37:11 pm by widoman »

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads