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.

Improve this question
1

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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 just use the clipping arguments of drawImage to draw the part of the images you want.
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 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.
-thanks for response.i will try canvas clipping and masking technique if i did't get another way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.