How to capture div element and upload it automatically to server as a picture with jQuery?
A:
JavaScript cannot take screenshots, you're going to have to look at flash for something like this, and I'm not sure it's possible in that case either (for security reasons).
For example, consider this case:
<div>
<iframe src="https://somesecutesite.com"></iframe>
</div>
Should I be able to screenshot that div and upload it? It may have my information filled into form fields, etc. There are many other examples, but just security alone is a good reason this isn't allowed.
On the off-chance this is for testing If you just want to see how your site looks in various browsers, take a look at browsershots.org for your testing.
Nick Craver
2010-08-03 13:05:43
I want to take screenshot of several layers of div in a div element and then upload it automatically. Is there any idea to do this?
Aditya Hastungkoro Hadi
2010-08-03 13:15:34
Other than having a user take a screenshot and send it to you, no there's not, at leas that I'm aware of. You could send the content (HTML) to the server, but not as a picture, not via JavaScript.
Nick Craver
2010-08-03 13:19:58
Then, how to process the content (html) into the picture on server?
Aditya Hastungkoro Hadi
2010-08-03 13:33:18
@Aditya - You'd have to setup a whole process around that, similar to what browsershots does...that's not a simple task. Why do you *need* a picture though, if you're just rendering the content back out, can you styling it the same in whatever page it goes into?
Nick Craver
2010-08-03 13:34:58
@Nick - It means that these processes will generate html elements that are arranged into a database. Then, what if we want to send the reduced picture via email? Won't it be less efficient?
Aditya Hastungkoro Hadi
2010-08-03 13:53:26
@Aditya - HTML is usually more compact than an image (by a large amount), so no it shouldn't be less efficient.
Nick Craver
2010-08-03 14:05:29
Sorry, my english was bad. Maybe I am a bit do not understand what you mean, but thanks a lot. I hope you do not have objections for solving my questions. :D
Aditya Hastungkoro Hadi
2010-08-03 14:05:32
@Nick : But, whether we were still able to change the html to image with PHP?
Aditya Hastungkoro Hadi
2010-08-03 14:10:08
A:
Nick is right. There would be a number of security issues relating to browser executed screenshots which are then saved to your site (think banking information).
An alternative would be doing this in a graphics library, based on the html contents of the div.
For example, if you are using PHP for your back end, you could use jQuery to fetch the contents of your 'div' element and pass it to a file via $.get(). Using GD library and knowledge of your stylesheet, and some HTML tree parsing, you supposedly could reproduce the 'div' as an image.
adu
2010-08-03 13:23:32
Thanks Adu. Is there any tutorials using jQuery to fetch the contents of 'div' element and pass it to a file via $.get()?
Aditya Hastungkoro Hadi
2010-08-03 13:59:37
Yes, there are a number of ways. The easiest would look something like this. All of them require you to give your 'div' tag an id.HTML`<div id="capture">Some stuff</div>`JavaScript (you can execute this code anywhere)`$.get("capture.php?content=" + $('#capture').html(), function(data) {`` //success handle``});`This would pull the html contents (tags and all) of your div#capture and send them to the file capture.php in the $_GET['content'] variable.For more information on jQuery, visit http://api.jquery.com/category/ajax/
adu
2010-08-03 14:08:46
Ohh, did not seem too difficult. But we still can change the html into an image right? Is there any tutorial about it?
Aditya Hastungkoro Hadi
2010-08-03 14:25:33
Its a pretty unique problem. It also depends on just how much stuff is in your 'div' and how much styling you do. If it is really complex, using regular expressions and painting it in GD Library may not be feasible. Also see if this is something you can use: http://www.webpagethumbnailer.com/
adu
2010-08-03 16:50:41