[SOLVED] Combine two PNG images into one
lazarus / 39-Graphics

----------------------------------------------------------------------
maurobio · 2023-07-29 12:22

Dear ALL,

I have two images in PNG format, let's call them "basemap.png" and
"points.png" (see attachments). I want to combine them into a single
PNG file, let's call it "map.png", so that "points" is overlaid on
"basemap".

Is it possible to do that programmatically in FPC, perhaps using the
fcl-image library?

Thanks in advance for any assistance you can provide!

With warmest regards,

----------------------------------------------------------------------
Josh · 2023-07-29 13:52

if points have transparent background you could use the timage on
paintbackground event.

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
Acanvas.StretchDraw(ARect,basepic.picture.Bitmap);

----------------------------------------------------------------------
maurobio · 2023-07-29 14:00

Hi, @Josh!

Thanks for taking your time to help me.

It works... But (with maurobio, there is always a 'but'  ) is there a
way of doing the image merge without using GUI components? I need that
the merge be done programmatically "under the hood",  generating a new
image file with the two images combined into one.

How can this be done?

Again, thank you very much!

With warmest regards,

----------------------------------------------------------------------
wp · 2023-07-29 14:21

This is about the minimum code needed for doing this with fcl-image
alone:
- add the reader/writers for png to the uses clause of the application
- create a TFPMemoryImage for the base and overlay images each
- load the images from their files
- iterate over vertical and horizontal dimensions of the images and
call AlphaBlend for each pixel. AlphaBlend combines the two colors
depending on their Alpha channel; the function is in unit fpImage.
(Introducing a canvas for drawing will be more effort, and a canvas
will do exactly the same)
- save the combined image.

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
project1; uses  SysUtils, fpImage, fpreadpng, fpwritepng;const 
BASE_IMAGE_FILE = 'basemap.png';  OVERLAY_FILE = 'points.png'; 
RESULT_FILE = 'combined.png';var  baseImg, ovrImg: TFPCustomImage;  x,
y: Integer;begin  baseImg := TFPMemoryImage.Create(1, 1);  try   
baseImg.LoadFromFile(BASE_IMAGE_FILE);    ovrImg :=
TFPMemoryImage.Create(1, 1);    try     
ovrImg.LoadFromFile(OVERLAY_FILE);      if (baseImg.Width <>
ovrImg.Width) or (baseImg.Height <> ovrImg.Height) then      begin   
   WriteLn('Both images have different size. Aborting...');       
Halt;      end;      for y := 0 to baseImg.Height-1 do        for x :=
0 to baseImg.Width-1 do          baseImg.Colors[x, y]:=
AlphaBlend(baseImg.Colors[x, y], ovrImg.Colors[x, y]);     
baseImg.SaveToFile(RESULT_FILE);    finally      ovrImg.Free;    end; 
finally    baseImg.Free;  end;end.

----------------------------------------------------------------------
maurobio · 2023-07-29 14:31

Hi, @wp!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Your code works fine (but of course! ). I will just "pack" it into a
function for general use, and that's that!

Thank you, very much!

With warmest regards,