0

I have a div element which contains two or three images. One of image are transform with some scale and rotation.I Just want to convert whole div into single image. I used html2canvas and i am a huge fan of that , but my problem is that the image with transform property is not same across all browser it works fine in chrome but not in Mozilla and IE.I am also using latest version of html2canvas in which transform is supported.Can you suggest me another way to convert div into image using only javascript not jquery.

Ahtisham
  • 216
  • 2
  • 13

1 Answers1

2

If you are only needing this for images and need to track transforms, then I would suggest using only canvas for this.

Insert a canvas element inside that div instead of the images, and paint onto it the images you need with the respective transform (translate, rotate etc.). From there it's simply to call toDataURL() to save everything as a single image.

Note that CORS restrictions applies (images must be loaded from same server as page, or given permission to be used outside CORS by the hosting server - one exception are images uploaded through a input field).

There exists many examples on SO for how to setup a canvas and draw images with rotation/transforms.

  • 1
    hello Ken Fyrstenberg!!thanks for response.i tried this method it does't solve my problem because in my div only part of images shown.i want to capture the visible div. – Ahtisham Dec 06 '14 at 11:42
  • 1
    @Ahtisham just use the clipping arguments of drawImage to draw the part of the images you want. –  Dec 06 '14 at 11:43
  • this method will become more complex because i have different scenario but i will try it.can u suggest me another method without drawing multiple images on canvas like html2canvas. – Ahtisham Dec 06 '14 at 11:52
  • @Ahtisham that lets you export it as image? There is SVG and foreignObject but this is even more restrictive when used with canvas. html2canvas will have to use the same technique (for images) as shown in the answer. –  Dec 06 '14 at 13:05
  • -thanks for response.i will try canvas clipping and masking technique if i did't get another way. – Ahtisham Dec 06 '14 at 13:10