15 Replies Latest reply: Sep 27, 2014 12:32 PM by Dharmendra Kumar

Javascript Screenshot page button

robboerman Jul 25, 2013 5:45 AM

Hi everyone,

I'm really stuck on this for weeks already.

i want a button that takes a screenshot of the current page and sets it for download as picture.

i tried to use html2canvas but that does not support rotation and that is really important that is does support rotation.

Can someone help me with that? i really am stuck on that for ages now.

- Rob

1. Re: Javascript Screenshot page button

robboerman Jul 25, 2013 11:23 AM (in response to robboerman)

can anyone help me with this? does anyone know if this is possible?
Like Show 0 Likes (0)

Actions
2. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 11:57 AM (in response to robboerman)

Hey Rob,
Here it is.

yepnope(
{
    nope:[
        'js/html2canvas.js',
     ],
    complete: init
}
);

function init() {
placeholder = sym.$("placeholder");
placeholder.html('');
var myCanvas = $('<canvas />');
myCanvas.attr("width", 550);
myCanvas.attr("height", 400);
myCanvas.appendTo(placeholder);

          sym.$('btn').click(function(){
                    html2canvas(document.body, {
onrendered: function(canvas) {
    document.body.appendChild(canvas);
},
width: 550,
height: 400
});
          });

}
Like Show 0 Likes (0)

Actions
3. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 11:54 AM (in response to robboerman)

Sample file:

https://app.box.com/s/jfoqrs4yy0vq28c4qa9w
Like Show 0 Likes (0)

Actions
4. Re: Javascript Screenshot page button

robboerman Jul 25, 2013 12:21 PM (in response to resdesign)

Ok, nice template btw

but html2canvas is not a solution for me, it doesn't support rotation, it only works on static pages. ( see photo)
i saw on his github alot of applys for support of rotation, but he doesnt update html2canvas anymore.

is there any way to make a button that presses the printscreen button for the user?
(i dont want the user to press the printscreen themself)
im stuck for ages on this now, there is not alot about this on the internet
and this is one of my most important parts of my project
Like Show 0 Likes (0)

Actions
5. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 12:33 PM (in response to robboerman)

Acutally my code was unecessary except to the button. But I am trying to make it work. Stand by.
Like Show 0 Likes (0)

Actions
6. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 12:39 PM (in response to robboerman)

Hey Rob,

Did you see this? Could be interesting.
http://ctrlq.org/code/19136-screenshots-javascript
Like Show 0 Likes (0)

Actions
7. Re: Javascript Screenshot page button

robboerman Jul 25, 2013 12:48 PM (in response to resdesign)

yea i saw that one to, but i couldn't get it to work, could you maby take a look at it?
http://learningthreejs.com/blog/2011/09/03/screenshot-in-javascript/ found this one to, but i couldnt get that one to work to....
Like Show 0 Likes (0)

Actions
8. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 12:55 PM (in response to resdesign)

Sure , stand by!
Like Show 0 Likes (0)

Actions
9. Re: Javascript Screenshot page button

resdesign Jul 25, 2013 1:13 PM (in response to robboerman)

Well, same here.
Another possible way is here;
http://www.nihilogic.dk/labs/canvas2image/
but it is also canvas so I am not sure it would work.
Like Show 0 Likes (0)

Actions
10. Re: Javascript Screenshot page button

robboerman Jul 25, 2013 1:51 PM (in response to resdesign)

canvas2image is just to change canvas to png.
my project is a html5 with jqeuryui photocollage, with advanced rotation of the images that can be controlled by dragging. so rotation is a pretty big part of my project.
maby go to plan b and let them just printscreen it and save it? seems kinda low tech to me xD.

or does anyone got a better plan b?
Like Show 0 Likes (0)

Actions
11. Re: Javascript Screenshot page button

robboerman Jul 26, 2013 9:45 AM (in response to robboerman)

there are no other scripts than html2canvas. so i think i will try to make a script that escorts users trough with making screenshot and paste in browser ( than catching it with html5 api )

btw resdesign, i think its really awesome that you help so many people on this forum, your like an example to me
adobe should make you an evangelist
Like Show 0 Likes (0)

Actions
12. Re: Javascript Screenshot page button

resdesign Jul 26, 2013 10:17 AM (in response to robboerman)

Haha! Thanks. I love helping people even with my limited knowledge!
Like Show 0 Likes (0)

Actions
13. Re: Javascript Screenshot page button

Zoze Apr 4, 2014 3:57 PM (in response to resdesign)

Hi resdesign and robboerman,

I am trying to use html2canvas and create a partial image and share ti to facebook.

Unfortnatelly, I've stuck as I want to create the image from various symbols <div> and place it is a layer in specific order.

In the link I have an example

https://www.dropbox.com/s/zu3x6rwqw3qfvdk/partialscreenshot.zip

I am trying when cick on button, to create an image from symbols base and layers and share it to facebook.

Perhaps somehow with drawImage could work but I don't know how.

Do you have any idea? Could you help?

Thanks in advanced.
Like Show 0 Likes (0)

Actions
14. Re: Javascript Screenshot page button

webcoderdesigner Jun 18, 2014 5:47 AM (in response to robboerman)

i need that one too, can someone show us a way of printscreen button ( and also save as picture) in edge animate ?
Like Show 0 Likes (0)

Actions
15. Re: Javascript Screenshot page button

Dharmendra Kumar Sep 27, 2014 12:32 PM (in response to webcoderdesigner)

I don't think there is a good solution for this problem, which is completely client side. I had used phantom js on node for something similar and had found it to be good. I have used it only as a test tool to capture screenshots for comparison though.
Like Show 0 Likes (0)

Actions