HTML2Canvas cutting off parts of image

[Loki180]

Hello!

I'm building a Canvas tool and I'm having an issue with HTML2Canvas where its cutting off part of the image inside of the div when the image is moved to the left or right using jquery's Drag function.

The issue seems to be with a zoom function that I have, the zoom scales the image using transform. Even though the image is seen inside of the div HTML2Canvas still cuts parts of it out.

The Code that I've used for HTML2Canvas is pretty simple, I've also tried making sure the page is at the top of the page but it still doesn't work.

`$(function() {
$(".button-2").click(function() {
$('html,body').scrollTop(0);
html2canvas($(".canvas-cut"), {

        onrendered: function(canvas) {
            theCanvas = canvas;
            canvas.toBlob(function(blob) {
                saveAs(blob, "Dashboard.png");
                alert("Done");
            });
        }
    });
});

});`

The image is within a few divs

<div class="column-2 w-col w-col-10"> <div class="canvas-cut"> <div class="image-container"> <div class="border"></div> <img id="drag" src="uploads/<?php echo $_SESSION['image']; ?>" class="image-2"> </div> </div> </div>

The div is captured well but the image is sometimes cut off.

Here is the issue

Also

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[kakkaraashish]

@Loki180 Hi did you find the solution for that... I was also facing same problem..

[RahulDudharjiya]

hey i have same issue can anybody find any solution ?

[mark1828]

me too in 2019, can't find the solution

[mlfactory]

Same here..

[exeleon]

Same problem with version 1.0.0-rc.5

[ttoliveira]

Same problem version 1.0.0-rc.5

[jatindumka]

Same problem version 1.0.0-rc.5

[phuquoc164]

Same problem version 1.0.0-rc.5

[mlfactory]

In my Chase - this worked : #265

i could not render background images and it seemed to be cover or contain background size, so i've changed line 350 in 0.4.1 version to:

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

and it works!

[mnedelkoski]

Even this did not help me. I got the left part of my image cut off, randomly without any pattern. Anyone managed to fix the issues? My version is 1.0.0-rc.5.

[kimnewbie]

same here in 2023 :'(