the image some time cutting and some time show correct

[M-Kamel]

Use case: description, code

<script>
        $(document).ready(function () {

            $('#download_img').on('click', function (e) {
                e.preventDefault()
                domtoimage.toBlob(document.getElementById('img_container'))
                .then(function (blob) {
                    window.saveAs(blob, 'image_name.jpg');
                });
            })
        });
    </script>

the image some time cutting and add transparent bg in the cutting part for example : the div 1200px width 1200 height when downloading image i got correct image and when refresh the page i got the image 1200px width 1200 height but it cutting and the cutting part is transparent like the images

Expected behavior

the image without cutting

Actual behavior (stack traces, console logs etc)

Library version

10-06-2017

Browsers

• [ ] Chrome Version 119.0.6045.124
• [ ] Firefox 119.0.1

[bean-frog]

I had a similar issue, here's what i did to fix it. (this may not be the case for you though) the element I was trying to screenshot had margins around it, which I believe was confusing the library. what I did was I removed the margin css from this element, then wrapped it in a new div with the margin css. this kept the rendered dom looking exactly the same, yet the element that needed to be screenshotted was exactly the size it needed to be with no extra margins (as viewed by the DevTools thing that highlights margins) this issue is kind of old so you may have solved the problem already, but if you haven't, try this. :)