How to compare 2 iframes and get difference visually?

Case :

I have 2 iframes and both have lot of divs and other controls so both iframes are like the medium size of HTML websites. I want to compare both and find out differences.

I thought different options here :

Solution 1: Take a full screenshot of 2 iframes and compare both screenshots using the pillow library of Python which draws the grid on the mismatch area in a screenshot. But here the issue is I did not find any code on the internet which can take full iframe screenshots (I have a long iframe with a scroll bar). I tried almost all answers on SO but all are working for a normal page but not for the iframe.

Reference : https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196

Solution 2: Get somehow all HTML code from both iframe and compare it, but this won't be easy to analyze result because it will find some HTML code that is different or have a mismatch in 2 iframes. This will be more like text compare and not a good solution I believe.

So I am looking for either code which can take a full screenshot of iframe using Python or Javascript OR some better option which allows me to compare 2 iframes and find out differences.

I tried almost all answers which google find our as per below :

Sample Iframe is given here where whole html is within iframe : https://grapesjs.com/demo.html , If some code can take full screenshot of this iframe then it will be easy to compare for me.