Merging two transparent png images AND drawing an outline around them

[ertank]

Hello,

I am using ImageMagick 7.0.8-0 Q16 x86 2018-06-12 on a Windows 10 64bit.

I have following transparent images:
design1: https://imgur.com/a/bSspnOZ
design2: https://imgur.com/a/Jj28fcd

I use following command line to merge them together:

Code: Select all

magick design2.png -draw "image over 0,0 0,0 'design1.png'" result.png

result.png is fine. Now, I would like to do two more things:
1- Draw an outline background to result.png image. It should look like following when done:
https://imgur.com/a/rQms94t (outline is not fine in terms of following main lines in parallel)

2- Add a border to outline with adjustable thickness and color. That border line should also have anti-aliasing on the transparent side:
https://imgur.com/a/i4jbnmc

Samples may not be what I would like to have in the final image, but they should pretty much give an idea of what is needed.

I appreciate any help.

Thanks & regards,
-Ertan

[fmw42]

This method works for me on IM 7.0.8.1 Q16 Mac OSX Sierra, but is slow due to the size of the kernel and your image sizes.

Unix:

Code: Select all

magick design1.png design2.png -compose over -composite \
\( +clone -alpha extract -morphology edgeout octagon:40 -alpha copy \) \
-compose over -composite \
\( +clone -alpha extract -morphology edgeout octagon:30 -negate -background red -alpha shape \) \
-compose over -composite \
sports_outline.png

Windows:

Code: Select all

magick design1.png design2.png -compose over -composite ^
( +clone -alpha extract -morphology edgeout octagon:40 -alpha copy ) ^
-compose over -composite ^
( +clone -alpha extract -morphology edgeout octagon:30 -negate -background red -alpha shape ) ^
-compose over -composite ^
sports_outline.png

Adjust the octagon:X values as desired for thickness.

[ertank]

It is really taking time to finish the job. Is there any "threading" ability in ImageMagick? Just to make it faster.

Other than this, I have two questions on result image.
1- I see some distance between white and red areas. That distance is saved as a transparent area: https://imgur.com/a/d0vgSDF
Sample image I have does not have such empty area: https://imgur.com/a/4Hh8Bpd
Is it possible to fine tune that?

2- It is requested to have anti-aliasing on the final red outline. I used below command on generated image. Putting aside above problem, it is seemingly working. Just would like to be sure that is the way to go?

Code: Select all

magick sports_outline.png -channel A -blur 1x65000 -level 50x100% -channel rgba sports_aliased.png

Thanks for the help.

Regards,
Ertan

[fmw42]

Using disk rather than octagon will produce a much smoother outline. You can fill the gaps with -morphology close at the end. This work for me in Unix syntax. Here is the Windows code:

Code: Select all

magick design1.png design2.png -compose over -composite ^
( +clone -alpha extract -morphology edgeout disk:40 -alpha copy ) ^
-compose over -composite ^
( +clone -alpha extract -morphology edgeout disk:30 -negate -background red -alpha shape ) ^
-compose over -composite ^
-channel rgba -morphology close disk:2 ^
sports_outline2.png

Add any further antialiasing via -blur as you have done already, if desired.

You could try taking the alpha channel, blurring it and then thresholding it. Then subtract the original alpha channel from it to make the outline in place of the -morphology edge out. That might be faster.

EDIT:

Yes, it is much faster, but is not as rounded.

Unix:

Code: Select all

magick design1.png design2.png -compose over -composite \
\( +clone -alpha extract \( +clone -blur 0x10 -threshold 0 \) -compose minus -composite -alpha copy \) \
-compose over -composite \
\( +clone -alpha extract \( +clone -blur 0x10 -threshold 0 \) -compose minus -composite -negate -background red -alpha shape \) \
-compose over -composite \
sports_outline3.png

[ertank]

Using disk rather than octagon will produce a much smoother outline. You can fill the gaps with -morphology close at the end.

How long it takes to complete on your system? I am still waiting it to complete and I forgot for how long it is running.

Edit:
It took about half an hour on my system.

As my knowledge about images is limited. That kind of images, can I use Q8 version (instead of Q16) and have identical output?

That's what comes in my mind to gain speed.

Thanks.

[ertank]

I am also requested following, if possible, to add double outline?

Thanks.

[fmw42]

On my INTEL Mac Mini (2 core) OSX Sierra (8G ram) and ImageMagick 6.9.10.1 Q16, the first script took 2m 55s. The second script took 12 s.

To add another color band, just duplicated the two lines for the red, such as

Code: Select all

magick design1.png design2.png -compose over -composite ^
( +clone -alpha extract -morphology edgeout disk:40 -alpha copy ) ^
-compose over -composite ^
( +clone -alpha extract -morphology edgeout disk:30 -negate -background red -alpha shape ) ^
-compose over -composite ^
( +clone -alpha extract -morphology edgeout disk:20 -negate -background blue -alpha shape ) ^
-compose over -composite ^
-channel rgba -morphology close disk:2 ^
sports_outline2.png

[ertank]

On my INTEL Mac Mini (2 core) OSX Sierra (8G ram) and ImageMagick 6.9.10.1 Q16, the first script took 2m 55s. The second script took 12 s.

What maybe a reason for me to have processing about 20 minutes (octagon) and an hour (disk)?

I'm using static executable. Can it be?

Intel cpu i7 7700k (8 cores), 8gb ram, windows 10 64bit

Thanks.

[fmw42]

I have no idea? What do you get from convert -version? Does it have OpenMP enabled? Are you on a hosted server that may have put limits on your policy.xml file?

The first one I mentioned was using the disk and the second one was using -blur.

[ertank]

I do not have OpenMP enabled as far as I understand from below output. My system also has SSD (Samsung 950 NVMe) and slowness cannot be because of a HDD. I see RAM usage going up to 500MB during processing. Starting around 100MB and slowly increasing.

Code: Select all

Version: ImageMagick 7.0.8-0 Q16 x86 2018-06-12 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2018 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Visual C++: 180040629
Features: Cipher DPC HDRI
Delegates (built-in): bzlib cairo flif freetype gslib heic jng jp2 jpeg lcms lqr lzma openexr pangocairo png ps raw rsvg tiff webp xml zlib

Very strange. I would love to get these commands processed in 3 minutes than 1 hour of course. I read somewhere that I can generate verbose log for debugging purposes. I do not know exact usage myself.

[fmw42]

Your version of ImageMagick does not include OpenMP, which allows multi-threading if you have more cores. My systems had a SSD also. I was actually processing with 7.0.8.1 Q16 HDRI. I would suggest you check your policy.xml file. or just do

Code: Select all

magick -list policy

though that may not actually list your policy if there are no restrictions.

Add -verbose to the command right after magick, if you want to see the verbose information about what is happening from the commands.

[ertank]

There was no policies listed.

I am developing an application. My application is using ImageMagick (IM) in the background. My EXE was 32bits and I did install 32bit version of IM on my system. x86 platform download's of IM seemingly does not have OpenMP support included.

I switched my application to be 64bits, also installed 64bit version of IM. That version has OpenMP support built in.

Code: Select all

Version: ImageMagick 7.0.8-2 Q16 x64 2018-06-18 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2018 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Visual C++: 180040629
Features: Cipher DPC Modules OpenMP
Delegates (built-in): bzlib cairo flif freetype gslib heic jng jp2 jpeg lcms lqr lzma openexr pangocairo png ps raw rsvg tiff webp xml zlib

That fixed my problem of slowness. Now, when my application run IM (disk version of above commands) it takes 2min 45 seconds with my application user interface overhead.

Thank you.