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 ?