-
Notifications
You must be signed in to change notification settings - Fork 272
Improve image diff #1797
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve image diff #1797
Conversation
Similar to the BLEND image-diff mode, but instead blends towards total DIFFERENCE at 50%. (This way, we can look at the difference in the middle, and slide towards OLD or NEW to view their respective contributions to the diff.)
Maybe add screenshots to show the new mode?
Maybe add screenshots to show the new mode?
First off, here are the modifications I made to the BLEND
slider and values...
(The same slider is re-used for the new DIFFERENCE
mode.)
Before:
image
After:
image
To show the DIFFERENCE mode, I'm borrowing the following images from https://www.textcompare.org/blog/how-to-compare-images/ :
imageHere's how that looks at 50% (full difference) in the new DIFFERENCE
mode:
image
By moving the slider slightly to the left / right, we start to blend in the corresponding OLD / NEW image, to show the difference-spots in context (while moving it all the way to the left / right would show only the original corresponding image) :
image
NOTE: This new DIFFERENCE comparison mode uses the BitmapBlendingMode.Difference
option on the right/NEW image (and BitmapBlendingMode.Source
on the left/OLD image), which was easy to implement as a slight modification of the BLEND comparison mode (the alpha values use different curves, with alpha = 1.0
for both images at 50%
on the slider). There are other more sophisticated ways to produce the per-pixel DIFFERENCE image (XOR:ing, highlighting color-distances above a threshold etc) which could be added later (in a "Method" drop-down).
I really like the new DIFFERENCE
mode. The only reason it hasn't been merged yet is whether we need to keep the BLEND
mode, or directly delete it and replace it with the latest DIFFERENCE
mode?
Or keep SIDE-BY-SIDE, BLEND, and DIFFERENCE, and remove SWIPE. Because I don't think SWIPE can achieve a good comparison effect.
Or keep SIDE-BY-SIDE, BLEND, and DIFFERENCE, and remove SWIPE. Because I don't think SWIPE can achieve a good comparison effect.
I think all these modes have their strengths - it all depends on the nature of the two images we're trying to compare, sometimes the differences are very subtle but at other times the two images can be almost completely different. Sometimes we already know where the differences lies, like a color-change of an object, and then Blend and Swipe are both good (also common and popular) ways for comparing before-and-after. If there is text in the image, the Swipe mode can make it easier (than the Blend mode) to check for wording differences.
I'm coming from the Plastic SCM version control system, where their built-in image-diff tool has 4 quite similar modes to the ones we're discussing (though their Differences mode instead uses an "inverted XOR" method) :
- Side-by-side
- Onion skin (= blend)
- Differences
- Swipe
See them in action here:
https://youtu.be/FpVTP3J__Yg?si=h4Fc8dM3GzHOIkYs
17ea185
into
sourcegit-scm:develop
Uh oh!
There was an error while loading. Please reload this page.
ImageBlendSlider
(visual noise, not needed).ImageBlendSlider
, for symmetry and to remove "jumping" UI.ImageBlendSlider
, at 0%, 50% and 100%, to make it easier to find the 50% mark again.