How to combine multiple images (Question).

[Roberth_12]

Hi, Greetings to all.

I'm starting to work with PureBasic v5.11 and mesclar need multiple images in bmp with black color background, but I can not get over the image you are left with transparent background, and the text is cropped. This is the first result I want to get (I really want mesclar 5 or 6 images):


This is my code:

Code: Select all

base = CreateImage(#PB_Any, 210, 210)
layer1 = LoadImage(#PB_Any, "backgrd.bmp")
layer2 = LoadImage(#PB_Any, "xclock.bmp")

StartDrawing(ImageOutput(layer1)) ; Create a layer, add some text
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(15,40, "Hello World! - Hello World!", RGB(255,255,255))
  DrawText(37, 133, "2DDrawing_Transparent", RGB(0,255,0))
StopDrawing()

StartDrawing(ImageOutput(layer2))
  DrawingMode(#PB_2DDrawing_Transparent) ; Another layer
StopDrawing()

StartDrawing(ImageOutput(base)) ; combine the layers (same as 'Merge Visible' in Photoshop)
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  DrawImage(ImageID(layer1),5,5)
  DrawImage(ImageID(layer2),48,130)
StopDrawing()

OpenWindow(0,0,0,220,220,"",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
ImageGadget(7, 5, 5, 200, 210,ImageID(base))
Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow

Here the two images used:


I hope you can help and thanks in advance for your answers.

PS: English is not my native language, sorry for grammar errors.

[Alex777]

An ordinary *.bmp image has no alpha channel. Change the background and clock images to 32-bit *.png files with transparency through the alpha channel. Then, this code works:

Code: Select all

UsePNGImageDecoder()

base  =  CreateImage(#PB_Any, 210,  210,  32,  #Black)
layer1  =  LoadImage(#PB_Any,  "backgrd.png")
layer2  =  LoadImage(#PB_Any,  "xclock.png")

StartDrawing(ImageOutput(base)) 

  DrawingMode(#PB_2DDrawing_AlphaBlend)
  DrawImage(ImageID(layer1), 5 ,5)
  DrawImage(ImageID(layer2), 48, 130)
  
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(15, 40,  "Hello World! - Hello World!",  RGB(255,255,255))
  DrawText(37,  133,  "2DDrawing_Transparent",  RGB(0,255,0))
  
StopDrawing()

OpenWindow(0,0,0,220,220,"",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
ImageGadget(7, 5, 5, 200, 210,ImageID(base))
Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow

[Roberth_12]

The code has been operated well with images *. Png, thanks. But at least one of the upper layers use an image *. Bmp and if the need for the black background of the image transparent.

[Roberth_12]

I have this solution using a custom filter, so you can choose the color that will be transparent in the images *.bmp. What do you think?

Code: Select all

Global TranspFilter_Color.f

Procedure Transparent_Filter(x, y, SrcColor, TrgColor)
  If SrcColor = TranspFilter_Color
    ProcedureReturn TrgColor
  EndIf
  ProcedureReturn SrcColor
EndProcedure

base.f = CreateImage(#PB_Any, 200, 200)
layer1.f = LoadImage(#PB_Any, "backgrd.bmp")
layer2.f = LoadImage(#PB_Any, "xclock.bmp")
layer3.f = LoadImage(#PB_Any, "smile.bmp")

StartDrawing(ImageOutput(base))
  DrawingMode(#PB_2DDrawing_CustomFilter)  ;CustomFilter
  TranspFilter_Color = RGBA($00, $00, $00, $FF) ;This color will not be drawn by the filter
  CustomFilterCallback(@Transparent_Filter())
  DrawImage(ImageID(layer1), 5, 5)
  DrawImage(ImageID(layer2), 10, 10)
  DrawImage(ImageID(layer3), 120, 30)

  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(25, 82,  "Hello World!",  RGB(0,255,0))
  DrawText(45, 132,  "Transparent Filter Color",  RGB(255,255,255))
StopDrawing()

OpenWindow(0,0,0,220,220,"Transparent_Filter",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ImageGadget(7, 5, 5, 200, 210,ImageID(base))
Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow

[Alex777]

Yah, that works, but colors should be defined as Longs and image identifiers should be Integers.

[IdeasVacuum]

....a lot of bitmaps will either fail or the edges will be a bit jaggy ('saw tooth'). Far better to stick with PNG images.

[Roberth_12]

True, but usually have a bmp image and we can use it without having to convert it to png and edit it to make a color transparent.

[PB]

Here's some old code I had lying around. It loads a BMP image
and then superimposes text over it. Maybe it can help you?

Code: Select all

; Palette index 0 must be the transparent colour of the bitmap!

If OpenWindow(0,200,200,200,150,"Test",#PB_Window_SystemMenu)
  i=LoadImage_(0,"C:\Image.bmp",#IMAGE_BITMAP,0,0,#LR_LOADFROMFILE|#LR_LOADTRANSPARENT|#LR_LOADMAP3DCOLORS)
  ImageGadget(0,50,20,0,0,i)
  TextGadget(1,50,40,100,20,"TRANSPARENT")
  InvalidateRect_(WindowID(0),0,1)
  Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
EndIf

[netmaestro]

If you're on Windows and you need transparent drawing at very fast speeds for images with no alpha layer, TransparentBlt should do the trick. Here's a simple example of how to implement it in your project, the parameters are pretty much self-documenting:

Code: Select all

Import "msimg32.lib"
  TransparentBlt( hdcDest, nXOriginDest, nYOriginDest, nWidthDest, hHeightDest, hdcSrc, nXOriginSrc, nYOriginSrc, nWidthSrc, nHeightSrc, crTransparent ) 
EndImport

CreateImage(0, 256, 256, 24, RGB(0,0,80)) ; background

CreateImage(1, 128, 128, 24, #Black)       ; image to be drawn transparent
StartDrawing(ImageOutput(1))
  DrawingMode(#PB_2DDrawing_Outlined)
  Circle(63,63,60,#White)
  Circle(63,63,40,#Green)
  Circle(63,63,20,#Red)
StopDrawing()

CreateImage(3, 256 , 256, 24) ; buffer image to be output to screen

hdcDest = StartDrawing(ImageOutput(3))
  DrawImage(ImageID(0),0,0) ; draw the background to the buffer image
  hdcSrc = CreateCompatibleDC_(0)
  SelectObject_(hdcSrc, ImageID(1))
  TransparentBlt(hdcDest,64,64,128,128,hdcSrc,0,0,128,128,#Black)
  DeleteDC_(hdcSrc)
StopDrawing()


OpenWindow(0,0,0,320,320,"",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
ImageGadget(0, 32, 32, 0, 0, ImageID(3))
Repeat:Until WaitWindowEvent() = #PB_Event_CloseWindow