1

I already looked at How do I convert my entire div data into image and save it into directory without using canvas?

And I used the html2canvas library and i was able to get an image, but it was not how i wanted it because I had a 3dtransfomed div inside and the final image did not keep that property.

The result using the html2canvas lib was this: enter image description here

And what I wanna get is something like this (blue dots are irrelevant): enter image description here

I have lets say this html code: <div id=background><div id=pig style=transform: matrix3d(1,2,4,2,34,4,5,3,54,3,4,4)><img src=whatever/></div></div> And I want to convert it to an image. I tried using the html2canvas library that they mentioned on the post i linked to at the top. But the result was the first image i posted. What I want the result to look like is the second image. So I thought it was because it did not take into account the transform3d on the pig div.

Community
  • 1
  • 1
Edgard Collante
  • 11
  • 2
  • I am unsure of what you are actually asking here.. – Rhys Bradbury May 14 '16 at 02:18
  • @niemmi I have lets say this html code: `
    ` And I want to convert it to an image. I tried using the html2canvas library that they mentioned on the post i linked to at the top. But the result was the first image i posted.     – Edgard Collante May 14 '16 at 02:25
  • I'm sorry I don't know anything about the subject, I just embedded the images to make it easier to read. If you have additional information please edit the original question. – niemmi May 14 '16 at 02:32
  • @RhysBradbury I added some more info at the bottom – Edgard Collante May 14 '16 at 02:41

1 Answers1

1

I'd recommend taking the image you get (which looks fine, but not skewed correctly) and running it through CSS transformations.

Information about CSS 3D Transforms

This demo of skewing a 3D prism with CSS should be of particular interest to you

Caroline Hermans
  • 391
  • 1
  • 5