Quantcast

Got Homework?

Connect with other students for help. It's a free community.

  • across
    MIT Grad Student
    Online now
  • laura*
    Helped 1,000 students
    Online now
  • Hero
    College Math Guru
    Online now

Here's the question you clicked on:

55 members online
  • 0 replying
  • 0 viewing

walters Group Title

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.

  • one month ago
  • one month ago

  • This Question is Closed
  1. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

    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:- <body> <div id='test'>Take My screenshot</div><p>Some other part of html</p></body> 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); } });

    • one month ago
  2. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

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

    • one month ago
  3. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

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

    • one month ago
  4. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    maybe thats why

    • one month ago
  5. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    error on property"canvas let me redo it"

    • one month ago
  6. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

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

    • one month ago
  7. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    <!DOCTYPE HTML> <html> <head> <title>screenshot</title> <link rel="stylesheet" type="text/css" href="my.css"> <script type="text/javascript" src="js/html2canvas.js"></script> <!-- --> </head> <body> <div id='test'>Take My screenshot</div><p>Some other part of html</p> <script> 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); } }); </script> </body> </html>

    • one month ago
  8. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    this is the error i am getting check the attachment

    • one month ago
    1 Attachment
  9. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

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

    • one month ago
  10. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

    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?

    • one month ago
  11. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    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.

    • one month ago
  12. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

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

    • one month ago
  13. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    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

    • one month ago
  14. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    THIS IS ACTUALLY THE OUTPUT I GET <!DOCTYPE HTML> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <div id='test'>Take My screenshot</div> <p>Some other part of html</p> <button onclick ="ScreenShot()">Click To Generate ScreenShot</button> <script> function ScreenShot(){ 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; download.text = 'Download'; document.body.appendChild(download); ///REGIN } }); } </script> </body> </html>

    • one month ago
  15. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

    can you upload the image which is being downloaded?

    • one month ago
  16. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    let me look for it ..

    • one month ago
  17. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    no image being doawnloaded the output is just the code .

    • one month ago
  18. thithina Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    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.

    • one month ago
  19. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

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

    • one month ago
    1 Attachment
  20. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

    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.

    • one month ago
  21. thithina Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    its working now, thank you alot :)

    • one month ago
  22. walters Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    ok it is fine thanks :)

    • one month ago
  23. CyberShadow Group Title
    Best Response
    You've already chosen the best response.
    Medals 2

    no worries

    • one month ago
  24. DaggerDogg Group Title
    Best Response
    You've already chosen the best response.
    Medals 0

    Have you tried Snipping Tool?

    • one month ago
    • Attachments:

See more questions >>>

Your question is ready. Sign up for free to start getting answers.

spraguer (Moderator)
5 → View Detailed Profile

is replying to Can someone tell me what button the professor is hitting...

23

  • Teamwork 19 Teammate
  • Problem Solving 19 Hero
  • You have blocked this person.
  • ✔ You're a fan Checking fan status...

Thanks for being so helpful in mathematics. If you are getting quality help, make sure you spread the word about OpenStudy.

This is the testimonial you wrote.
You haven't written a testimonial for Owlfred.