Hi help please php,javascript and html
Is there any way of taking screen shot of any part of the interface but not the whole window and save it as an image in a file.

Question

Hi help please php,javascript and html
Is there any way of taking screen shot of any part of the interface but not the whole window and save it as an image in a file.

cybershadow · Answer

If you are talking about taking the screenshot of a part of a webpage , then yes it is possible.....but if you are talking abt taking the screenshot of user's desktop/wholescreen ,using php and html then No. Screenshot of a webpage could be taken in multiple ways , but the most suitable way in my opinion would be to use , $\href{http:///html2canvas.hertzen.com/documentation.html}{html2canvas}$ library . Example: Suppose we want to take screenshot of div with id "test" Html Code:-

Take My screenshot

Some other part of html

Javascript Code: var element = document.getElementById('test'); html2canvas(element, { onrendered: function(canvas) { //rendered canvas var download = document.createElement('a')//creating link for downloading image download.href =canvas.toDataURL();//use canvas.toDataURL('image/jpeg') for jpg file download.download = true; document.appendChild(download); } });

walters · Answer

so its that all can i test it now to see the output? or i still have to do extra things

cybershadow · Answer

That is all, You just have to include html2canvas.js in ur external javascript libraries

walters · Answer

maybe thats why

walters · Answer

error on property"canvas let me redo it"

cybershadow · Answer

here is the working/complete version of the example..... http://pastebin.com/wKqtSmmL

walters · Answer

screenshot

Take My screenshot

Some other part of html

walters · Answer

this is the error i am getting check the attachment

cybershadow · Answer

have you tried using this code ?....... http://pastebin.com/wKqtSmmL <----

cybershadow · Answer

That error is shown because html2canvas.js isnt downloaded on your system.... you can use cdn version tho....and code given in http://pastebin.com/wKqtSmmL should work fine.What are you getting using that code?

walters · Answer

it actually outputs the exact code i 'va copied ,is the a way to embed the button which i will click it to take screen shot.but it is working tho.

cybershadow · Answer

So  image is being downloaded when u click on button?or is it giving error?

walters · Answer

i can say it the image but it output the code as an image so i don't know how am i going to put it  on my code

walters · Answer

THIS IS ACTUALLY THE OUTPUT I GET

Take My screenshot

Some other part of html

cybershadow · Answer

can you upload the image which is being downloaded?

walters · Answer

let me look for it ..

walters · Answer

no image being doawnloaded the output is just the code .

anonymous · Answer

Hey. i have always wanted to use screen shots in my websites. i just tested and followed the code above, it out puts the code exactly as is.

walters · Answer

ok i've put it on my local host this is what i get now

cybershadow · Answer

Yes thats the screenshot of your div...... it is working , If you want to open the image instead of downloading it , just change "download.download = true;" to "download.download =false;" in your code.

anonymous · Answer

its working now, thank you alot :)

walters · Answer

ok it is fine thanks :)

cybershadow · Answer

no worries

anonymous · Answer

Have you tried Snipping Tool?