search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.71k stars 603 forks source link

Changing Diff Image Defaults #302

Open Spydr331 opened 7 years ago

Spydr331 commented 7 years ago

Is there a way to change the default options for the diff image in the report? right now it just posts the image with pink around the change. Is there a way to make add an opacity to the rest of the image to highlight the pink more? or change the pink to another color? or instead of a filled in square have it be a bordered square?

garris commented 7 years ago

You could look at the resemble.js library for those parameters.

Spydr331 commented 7 years ago

thanks garris, ill look into it :)

Spydr331 commented 7 years ago

I was able to get a transparency to show up. in the node package for backstop I had to go into: backstopjs\core\util\compare.js

and on line 37 I added this:

resemble.outputSettings({
  transparency: 0.3
});
Spydr331 commented 7 years ago

So there is no border option, the changed areas were only squares because the changed areas were square.

Don't suppose adding options to control the color or opacity of the result image is in the timeline for improvements is it?

klausbayrhammer commented 7 years ago

I really like the idea - I'll take a shot at it when I have time!

klausbayrhammer commented 7 years ago

Should be available with version 2.3.1 (fixed in #345)

garris commented 7 years ago

This is in @latest.