Welcome to the 24th and last door of our advent calendar. In this advent calendar I would like to take you on a journey through the GraphicsMagick component in December. Every day I will introduce you to one or more functions from this component. In this component you will find functions with which you can analyze images, convert them, change them with filters, draw them and much much more. In the end, you too can take the magic of GraphicsMagick to your images. I wish you a lot of fun in the process.

Today I will show you how to turn a rectangular image into a round one. To say it at the beginning. There is no such thing as a round image. The illusion that an image is round is created by the alpha channel. This means that certain areas are transparent.

First, we load the image from the container again and determine the width and height of the image.

Set Variable [ $GM ; Value: MBS("GMImage.NewFromContainer"; GraphicsMagick Advent::Image) ] 
Set Variable [ $Width ; Value: MBS( "GMImage.GetWidth"; $GM ) ] 
Set Variable [ $Height ; Value: MBS( "GMImage.GetHeight"; $GM ) ] 

We first need the image as a square. So we determine the size of the shorter of the two sides. For this, we distinguish our procedure for Landscape and Portrait mode. With the function "GMImage.Crop" we crop the image as we already know it from door 7.

 
If [ $Width>$Height ] 
	# Landscape
	Set Variable [ $SizeGeometry ; Value: $Height & "x" & $Height ] 
	Set Variable [ $Size ; Value: $Height ] 
	Set Variable [ $OffsetX ; Value: ($Width - $Height) / 2 ] 
	Set Variable [ $OffsetY ; Value: 0 ] 
Else
	# Portarait
	Set Variable [ $SizeGeometry ; Value: $Width & "x" & $Width ] 
	Set Variable [ $Size ; Value: $Width ] 
	Set Variable [ $OffsetX ; Value: 0 ] 
	Set Variable [ $OffsetY ; Value: ($Height - $Width ) / 2 ] 
End If
Set Variable [ $Geometry ; Value: $SizeGeometry & "+" &$OffsetX& "+" &$OffsetY ] 
Set Variable [ $r ; Value: MBS( "GMImage.Crop"; $GM; $Geometry ) ] 

This way, our image is now already cut square.

Next, we create a new GraphicsMagick workspace with a transparent background. In this environment we draw a black circle with the diameter of our square. Accordingly, the radius we have to specify for drawing is $Size/2

Set Variable [ $Cut ; Value: MBS("GMImage.New";$Size & "x" & $Size; "transparent") ] 
Set Variable [ $r ; Value: MBS("GMImage.SetFillColor";$Cut;"black") ] 
Set Variable [ $radius ; Value: $Size/2 ] 
Set Variable [ $r ; Value: MBS("GMImage.DrawCircle";$Cut;$radius;$radius;0;$radius) ] 

This black circle defines the image section that we want to see later from the other image. That is why it is so important that the background of our circle is also transparent. On December 22nd we have already learned about the function GMImage.CompositeXY and we know that this function is very powerful. We use it again today. We put the image we want to see on our circle with option 2. We don't have an offset, because the images have the same size. With this combination we only see the pixels from the image where our circle is. The transparent pixels are not overwritten. Our desired result is then in the workspace $Cut.

Set Variable [ $r ; Value: MBS( "GMImage.CompositeXY"; $Cut; $GM; 0; 0  ; 2  ) ] 

Finally we write our working environment $Cut with the function GMImage.WriteToPNGContainer into the container that shows us our round image. At the end we must not forget to release the various working environments.

Set Field [ GraphicsMagick Advent::Image ; MBS( "GMImage.WriteToPNGContainer"; $Cut ) ] 
Set Variable [ $r ; Value: MBS( "GMImage.ReleaseAll" ) ] 

Now we have reached the advent. I hope you enjoyed it and you can use one or the other of what we have shown here in your everyday work. If you have any questions about these or other features, please feel free to contact us.
Until then, we wish you a Merry Christmas and a Happy New Year.

Download sample project

by Stefanie

Previous day