20

I have a JavaScript application that an user interacts with. I need to save the appearance of the interface at the current time, crop out the part that I need (or only shot the part that I need by specifying the div), and send it back to the server.

Clearly any external services would not be able to do this, I need a JavaScript (or Flash) script that can save the screen appearance. Is this possible?

Also, as the comment below says, I cannot use ActiveX.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jourkey
  • 33,710
  • 23
  • 62
  • 78

4 Answers4

8

Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/

JAAulde
  • 19,250
  • 5
  • 52
  • 63
0

I think using JavaScript, you won't be able to due to the security restrictions. Flash, possibly.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Michael Neale
  • 19,248
  • 19
  • 77
  • 109
-2

It's impossible in pure JavaScript, without using ActiveX.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
YOU
  • 120,166
  • 34
  • 186
  • 219
  • 2
    +1 for explaining what he'd need. An active x control could do this, javascript would interface with it. – Allen Rice Jan 12 '10 at 05:16
  • 2
    It's possible. Go to a youtube video. Click "Report a Bug" all the way down at the bottom of the screen. Canvas seems to be the trick. – IEnumerator Jun 20 '11 at 15:53
  • It seems that they are using: JPEG encoder ported to JavaScript and optimized by Andreas Ritter, www.bytestrom.eu, 11/2009 Basic GUI blocking jpeg encoder among other things. – IEnumerator Jun 20 '11 at 16:01
  • you may be right - One of the iframes it generates contains a copy of the HTML at the time you clicked the report a bug link. It seems that the HTML is then rendered server side as an image on top of which they overlay the areas highlighted by you when you submitted the bug. – IEnumerator Jun 20 '11 at 16:03
  • Hi. I got about same poblem [link](http://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-dit-it-no-need). About your comment: why you think YouTube renders report a bug server side? Why then they do implement JPG encoder in code? – Paweł Szymański Aug 04 '11 at 05:08
  • Here is code of Javascript jpeg encoder http://code.google.com/p/closure-library/source/browse/trunk/third_party/closure/goog/jpeg_encoder/jpeg_encoder_basic.js?r=440 – Andrey Nikishaev Sep 27 '11 at 15:56
-2

It is impossible using JavaScript (nor Flash). It depends on your constraints, and there are some workarounds.

  1. You can take advantage of browser extensions (such as a Firefox add-on), but I guess it does not fit your requierments.
  2. The best option I can think of is to construct the DOM tree on the client side, and then post it to remote server.

On the server side nothing really holds you from doing generally anything. Using WebKit or even launching Internet Explorer or Firefox, you can create the snapshot server-side. It's far from elegant, but possible.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sug
  • 822
  • 1
  • 7
  • 9