html2canvas capture iframe and contents. I can do either, but not both

Question

I'm using html2canvas to try and capture an iframe and it's contents. This is all running on the same server so no cross-domain.

So far I can capture either the iframe with an empty body, or the body with no surrounding iframe.

For the iframe itself I'm using:

$('.element').each(function( elm, obj ) {
    html2canvas( document.getElementById( obj.id ) ).then( function( canvas ) {
        var img = canvas.toDataURL()
        // append img to div // 
    });
})  

For the iframe body this is working:

$('.element').each(function( elm, obj ) {
    iframeDocument = document.getElementById( obj.id ).contentWindow.document.body;
    html2canvas( iframeDocument ).then( function( canvas ) {
        var img = canvas.toDataURL()
        // append img to div //
    });
})  

Both work, but I'd like to have the preview image show the iframe with it's contents.

May aim is to loop through the class .element and show each preview in a single modal.

Is there anyway to do that either using html2canvas or another way ?

Thank

Answer 1

I've decided to just capture the iframe and then use css styling around that image so it looks like the full frame. That seems to be working well.