Take a snapshot of a div

Question

I have a <div> with an image in it. The image can be resized by users input, also items can be added to the current image. Once finished I would like the user to be able to save this image they created.

I have used MVC4 and jQuery to build the project. Is there anyway to save a snapshot of the created item? I have looked at canvas but this would not work in my case.

Thanks

Save a temporary snapshot locally for use again during user's 'current' session? — Mark Graham, Feb 28 '13 at 15:51

score 3 · Accepted Answer · edited May 23 '17 at 11:43

3

Intriguing question:

You can start here: http://html2canvas.hertzen.com/ a library that allows you to "copy" HTML into canvas.

Then, go here: Uploading 'canvas' image data to the server

An answer that shows you how to send the canvas image to the server.

There you have it.

Disclaimer: have not tried myself, but I'm now dying to. Work deadlines not allowing :)

edited May 23 '17 at 11:43

Community

1
1

answered Feb 28 '13 at 15:51

Adriano Carneiro

57,693
12
90
123

Seems to work sort of, do you know if this can this be done on part of a screen and not the body? – CR41G14 Feb 28 '13 at 16:20
I worked with this for some time. It CAN be done for a part of screen (a specific HTML element). You'll have to check the documentation. However I'd rather suggest you get the coordinate of resized image and other items and then do the processing server side. More reliable imo. – Salman Feb 28 '13 at 17:00

Take a snapshot of a div

1 Answers1