How to compose images pixel perfect

[freakin09]

Hi,
I am using IM to overlay images on top of a transparent background and am then comparing (not using IM atm) the resulting image with a image I know is "good" (I am essentially doing screenshot tests).
However, the resulting composed image does not match with the "good" image and the diff image shows slight differences around the edges of certain elements.

Here is an example of the kind of differences I get :
resulting composite image : https://ibb.co/n15mAy
difference image : https://ibb.co/je0Exd

I suspect that the differences are due to antialiasing and I tried to add "+antialias" after "-composite" in the hope of solving my problem but it seemed to have had no effect

I use a command like this :
"convert -size 1000x1000 canvas:none background && convert \( background image1 -geometry +0+0 -composite \) \( +clone image2 -geometry +100+100 -composite -write dest \) null: "

Any help will be appreciated. Thanks in advance !

Version: ImageMagick 6.8.9-9 Q16 x86_64 2017-07-31
I am on Ubuntu 16.0.4

[fmw42]

Your images do not show, possibly due to the https protocol in the links. Please post example input images and a resulting output image and your "good" image. Also say how the good image was created. That way we can try to reproduce your commands and perhaps fix the issue.

[fmw42]

I changed your links to urls, so they could be accessed.

[snibgo]

I'm confused.

You show a "resulting composite image". Does that come from the command you showed? What are the inputs to that command?

You show a "difference image" but don't say where that comes from. So it's difficult to say why that doesn't show whatever you want it to. And I don't know what you want from a differences image.

[freakin09]

Sorry for the confusion. Yes, the "resulting composite image" is the result of composing 2 images using the command I posted above.

I was removing those images after my work with them was done and so did not upload then but here they are now:

image1 : https://ibb.co/noWMSd
image2 : https://ibb.co/iCh6tJ

Here is the "good image" :
good image: https://ibb.co/j9ZrSd

the difference image is basically the result of comparing the "good" image and the "resulting composite image" (I think it uses resemble.js now to do the comparison).

The purpose is to basically check if the UI of an app has changed due to any changes to the code and its done by taking a screen shot of the current UI and
then comparing to the "good image" which is essentially a screen shot which was at some time accepted to be good (for me, this "good" image was the image which resulted from composing image1 and image2 using a function which I changed to now use IM. This function previously used phantom js and essentially drew one image and then the other on the same canvas)

The problem is that if I compare the screen shots generated by the old "stitching function" with the new "stitching function which uses IM" , there seems to be differences around the edges of certain elements such as say texts.

[fmw42]

Your command makes no sense. Your background is too small for your images. Also your two images are the same size. Thus any offset in -geometry will crop off some of the image. If the offset is removed and the two are composited, the one fully covers the other.

Please correct your command line or send the proper images.

[freakin09]

sorry for not being clear with my earlier command. The command for the particular images is more like

"convert -size max(image1.width x image2.width) x max(image1.height x image2.height) canvas:none background && convert \( background image1 -geometry +0+0 -composite \) \( +clone image2 -geometry +0+0 -composite -write dest \) null: "

[fmw42]

Still does not make sense, since both images and canvas are all the same size. Thus the top image will be all that you see? You need to crop or resize the table image. Also there is no need for the canvas image, since it will be the same size as your two input images. There is also no need for the clones, since composites can be done in pairs and the inputs will be removed after the composite.

This is what you get from doing effectively what you are currently asking and the result is only the table image, no border is showing.

Unix syntax

Code: Select all

maxsize=$(convert border.png table.png -format "%[fx:max(u.w,v.w)]x%[fx:max(u.h,v.h)]\n" info: | head -n 1)
convert -size $maxsize canvas:none border.png -composite table.png -composite result.png

[snibgo]

The two source files, b640im_border_site_with_hilites_new.png and b641im_border_site_with_hilites_new.png, are the same size. The first is fully opaque. The second is mostly transparent. So we composite the second over the first.

The inputs are 8 bits/channel/pixel.

As they are the same size, a simple "-composite" makes an output that contains all the input pixels. (Windows BAT syntax.)

Code: Select all

magick ^
  b640im_border_site_with_hilites_new.png ^
  b641im_border_site_with_hilites_new.png ^
  -composite ^
  b64_out1.png

In the general case where the sizes are different, to make the output the width of the widest input and the height the highest input, we can use "-layers merge":

Code: Select all

magick ^
  b640im_border_site_with_hilites_new.png ^
  b641im_border_site_with_hilites_new.png ^
  -background None ^
  -layers merge ^
  b64_out1.png

We can find the difference between that and good.png:

Code: Select all

magick ^
  b64_out1.png ^
  good.png ^
  -compose Difference -composite ^
  b64_diff.png

The output looks entirely black, so there is very little difference.

We can find the maximum difference:

Code: Select all

magick ^
  b64_diff.png ^
  -format %%[fx:maxima] ^
  info:

0.00392157

This is one part in 256. The inputs are 8-bit, so the largest difference is as small as it can be.