Html2canvas, canvas cropped when using rotate image

[amine86]

Hello,

Thank you very much for this project,
I used HTML2PDF, and I noticed an issue with rotate image on html2canvas.
when I use a rotate image, it's cropped from the bottom and right and not positionned correctly, please see here : https://jsfiddle.net/yynmre4k/

Thank you,

[eKoopmans]

Hi @amine86, this is a problem with how html2canvas handles the clipping of transformed elements, which I began to fix in this pull request. I've created a simplified version of your Fiddle using only html2canvas here (and one using the original html2canvas, without my pull request incorporated, here).

It's a tricky problem that I believe requires a rewrite of how clipping is performed in html2canvas. I was able to fix transform: translate() issues, but rotations are a different issue that I can't solve the same way.

[amine86]

Hi @eKoopmans thank you very much for your helps, unfortuntly I cannot use this on my project without fixing this issue of the rotate, did you know any plugin or script that's work good can convert html to canvas or html to svg ? Even a trick that's need to purchase license ?

Thanks for your help

[eKoopmans]

Hi @amine86, you might have luck with this approach, rendering HTML through an SVG and then into a canvas:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

There's also rasterizeHTML, which is similar to html2canvas. I haven't tried either approach much, let me know if they work out for you!

[amine86]

Hi @eKoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

[InfinitumForm]

Tell me about something, in 0.5.0-beta4 you add that some test functionality for this. Can we see where is that part code to try contribute and get together some good results? Thanks!

[amine86]

Hi @CreativForm , yes it's a good idea, @eKoopmans can you help us with this ?

[eKoopmans]

Hi, I'm not sure which test functionality you're describing. You can see the work I've done to fix CSS-transform cropping here.

[amine86]

@eKoopmans I hope that you are fine, any news about this issue ?
Did you already added a fix to your module html2PDF ?

Thank you,

[eKoopmans]

Hey @amine86, I'm doing great thanks! No progress unfortunately... I'm finally getting some time to get back to coding now, so I'll see if I can make a go of it soon.

[amine86]

Hey @eKoopmans , thanks for you reply, Hope you can solve it soon, thanks for your helps

[amineeg]

Hello @eKoopmans , I hope that you are fine, any upgrade on your module "html2PDF" for this issue of the rotate ?

Thanks,

[eKoopmans]

Nope, but thanks for the reminder. You might have noticed I've only just returned to the project after a long hiatus. It looks like @niklasvh just released a v1.0.0 alpha yesterday, that may hold some answers!

@niklasvh if you're reading, sorry I haven't done anything to help with html2canvas. I hope it's going well!

[amineeg]

Hello @eKoopmans thank you very much for your quick response,
Yes I tested the latest release, but I noticed that always got the same problem when using a rotate (the result is cropped),
In this last release it missed a "scale" that you use it into "html2pdf", did you provide to add it into it ?

[eKoopmans]

@amineeg are you talking about the latest release of html2canvas or html2pdf?

The latest release of html2canvas has the scale option added in, although it doesn't have dpi. It hasn't yet addressed this issue of clipping and CSS transforms.

[amineeg]

@eKoopmans yes you are right, it's contains scale, hope this problem of rotate will be solved soon.
Thank you very much for your help.

[feedyourmind]

I have had the clipping issue with scale.
When scaling to a bigger image it works fine (f.e. transform scale(1.4) )
When scaling to smaller image it clips the image (f.e. transform scale(0.6) )

[InfinitumForm]

Hi @eKoopmans, any news regarding this issue? Can we help you somehow to solve this rotation issue?

[amineeg]

Hello @eKoopmans @CreativForm ,

Any news for this bug ?

Thanks,

[InfinitumForm]

Hi @amineeg From my side no, I waiting @eKoopmans to say something. :)

[amineeg]

Thanks @CreativForm , @eKoopmans @niklasvh any news about this issue ?

[codedbyglenden]

@eKoopmans Any movement on this issue?

[WR4F]

Try to scroll the window to the top with:

window.scrollTo(0,0);

I have tested this solution myself and can vouch that it worked for me - it appears to be a bug with html2canvas.

Not sure why, but even when an element is completely offscreen, it isn't a problem. But not being scrolled all the way to the top is what apparently seems to cause the captured canvas image to come out offset vertically by how much one had been scrolled by.

This causes the resulting image to have the right height but start offset from the top by X number of pixels, making the top of the image have blank space.

Reference: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut