[SOLVED] Transparent background in TFPMemoryImage saved to a PNG
stream, howto
lazarus / 39-Graphics

----------------------------------------------------------------------
alpine · 2026-01-11 17:58

I'm kinda stuck here, I want to do some drawing on a transparent
background and save it to a png stream. It should be something simple,
but I can't figure it out ...

Thanks in advance!

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i   Image :=
TFPMemoryImage.Create(ARect.Width, ARect.Height);  Canvas :=
TFPImageCanvas.Create(Image);  Writer := TFPWriterPNG.Create;   with
TFPWriterPNG(Writer) do  begin    Indexed := False;    WordSized :=
False;    UseAlpha := False;    GrayScale := False;  end;   try   
with Canvas as TFPImageCanvas do    begin      Brush.FPcolor :=
colTransparent //Desn't work!      Brush.Style := bsSolid;       //
Clear background      Clear;      // Some drawing stuff here...    
end;    Image.SaveToStream(AStream, Writer);  finally    Canvas.Free; 
  Image.Free;    Writer.Free;  end;

----------------------------------------------------------------------
wp · 2026-01-11 18:04

When your Png-Writer has "UseAlpha=false" it does not write the alpha
channel. When you set it to true, transparency should be in the file.

This sample project works:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
alphablend;uses  FPImage, FPImgCanv, FPCanvas, FPWritePNG;var  img:
TFPMemoryImage;  canvas: TFPImageCanvas;  writer: TFPWriterPNG;begin 
img := TFPMemoryImage.Create(200, 200);  canvas :=
TFPImageCanvas.Create(img);  try    canvas.DrawingMode :=
dmAlphaBlend;  // This activates the alpha-blend mode     //
Background    canvas.Pen.Style := psClear;    canvas.Brush.FPColor :=
colTransparent;    canvas.Clear;//    canvas.FillRect(0, 0, img.Width,
img.Height);     // Yellow opaque rectangle    canvas.Brush.FPColor :=
FPColor($FFFF, $FFFF, 0);    canvas.Rectangle(10, 10, 190, 100);    
// Overlapping semi-transparent red circle    canvas.Brush.FPColor :=
FPColor($FFFF, 0, 0, $4000);    canvas.Ellipse(60, 60, 140, 140);    
// Overlapping semi-transparent blue circle    canvas.Brush.FPColor :=
FPColor(0, 0, $FFFF, $8000);    canvas.Ellipse(0, 100, 100, 200);    
writer := TFPWriterPNG.Create;    try      writer.UseAlpha := true;  
  img.SaveToFile('alphablend.png', writer);    finally     
writer.Free;    end;  finally    canvas.Free;    img.Free;  end;end.

----------------------------------------------------------------------
alpine · 2026-01-12 10:28

Very much appreciated, thank you wp!

----------------------------------------------------------------------
ginoo · 2026-01-13 08:31

Quote from: wp on January 11, 2026, 07:04:50 pmWhen your Png-Writer
has "UseAlpha=false" it does not write the alpha channel. When you set
it to true, transparency should be in the file.

This sample project works:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
alphablend;uses  FPImage, FPImgCanv, FPCanvas, FPWritePNG;var  img:
TFPMemoryImage;  canvas: TFPImageCanvas;  writer: TFPWriterPNG;begin 
img := TFPMemoryImage.Create(200, 200);  canvas :=
TFPImageCanvas.Create(img);  try    canvas.DrawingMode :=
dmAlphaBlend;  // This activates the alpha-blend mode     //
Background    canvas.Pen.Style := psClear;    canvas.Brush.FPColor :=
colTransparent;    canvas.Clear;//    canvas.FillRect(0, 0, img.Width,
img.Height);     // Yellow opaque rectangle    canvas.Brush.FPColor :=
FPColor($FFFF, $FFFF, 0);    canvas.Rectangle(10, 10, 190, 100);    
// Overlapping semi-transparent red circle    canvas.Brush.FPColor :=
FPColor($FFFF, 0, 0, $4000);    canvas.Ellipse(60, 60, 140, 140);    
// Overlapping semi-transparent blue circle    canvas.Brush.FPColor :=
FPColor(0, 0, $FFFF, $8000);    canvas.Ellipse(0, 100, 100, 200);    
writer := TFPWriterPNG.Create;    try      writer.UseAlpha := true;  
  img.SaveToFile('alphablend.png', writer);    finally     
writer.Free;    end;  finally    canvas.Free;    img.Free;  end;end.
Sorry if I ask you a question, how do you write text inside
TFPMemoryImage?

----------------------------------------------------------------------
wp · 2026-01-13 09:48

Quote from: ginoo on January 13, 2026, 09:31:18 amhow do you write
text inside TFPMemoryImage?
https://wiki.freepascal.org/fcl-image#Drawing_text

----------------------------------------------------------------------
ginoo · 2026-01-13 10:04

I did it, you need to create a TFreeTypeFont.

----------------------------------------------------------------------
wp · 2026-01-13 10:19

What do you want to say?

This is the complete code that I used for testing (on Windows), it is
working (except of a drawing glitch of the character boundary blocks
above alpha-blended parts - I reported this in
https://gitlab.com/freepascal.org/fpc/source/-/issues/41577). [EDIT -
the issue already has been fixed, that was fast!]

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
alphablend;uses  FPImage, FPImgCanv, FPCanvas, FTFont, FPWritePNG;var 
img: TFPMemoryImage;  canvas: TFPImageCanvas;  writer: TFPWriterPNG; 
font: TFreeTypeFont;begin  // initialize free type font manager 
FTFont.InitEngine;  {$IFNDEF MSWINDOWS} 
FontMgr.SearchPath:='/usr/share/fonts/truetype/ttf-dejavu/';  // not
needed on Windows  {$ENDIF}  font:=TFreeTypeFont.Create;   img :=
TFPMemoryImage.Create(200, 200);  canvas :=
TFPImageCanvas.Create(img);  try    canvas.DrawingMode :=
dmAlphaBlend;  // This activates the alpha-blend mode     //
Background    canvas.Pen.Style := psClear;    canvas.Brush.FPColor :=
colTransparent;    canvas.Clear;     // Yellow opaque rectangle   
canvas.Brush.FPColor := FPColor($FFFF, $FFFF, 0);   
canvas.Rectangle(10, 10, 190, 100);     // Overlapping semi-
transparent red circle    canvas.Brush.FPColor := FPColor($FFFF, 0, 0,
$4000);    canvas.Ellipse(60, 60, 140, 140);     // Overlapping semi-
transparent blue circle    canvas.Brush.FPColor := FPColor(0, 0,
$FFFF, $8000);    canvas.Ellipse(0, 90, 100, 190);     // Paint text 
 canvas.Font := font;    canvas.Font.Name := 'DejaVuSans';   
canvas.Font.Size := 64;    canvas.Font.FPColor := FPColor($0FFF,
$0FFF, $0FFF, $6000);    canvas.TextOut(5, 140, 'Test');     // Write
to file    writer := TFPWriterPNG.Create;    try      writer.UseAlpha
:= true;      img.SaveToFile('alphablend.png', writer);    finally   
 writer.Free;    end;  finally    canvas.Free;    img.Free;   
font.Free;  end;end.