0

I'm trying to allow users to capture screenshots of targetted elements (paragraphs) of my webpage and then displaying the captured screenshot on a div (not canvas) where they can download the screenshot.

Here is a visual of what I'm trying to accomplish: https://i.stack.imgur.com/Vuar6.png

This is what I've tried so far:

HTML

    <p id="content">lorem ipsum bla blah, screenshot me like one of your French girls</p>
<h1>Right click image in div below and download:</h1>
    <div id="display" width="500" height="200"></div>
    <button>capture</button>

JS

 document.querySelector("button").addEventListener("click", function() {
     (document.querySelector("#content")
        });
    };

CSS

#display {
            border: 1px solid black;
        }
        button {
            clear: both;
            display: block;
        }
        #content {
            background: rgba(100, 255, 255, 0.5);
            padding: 50px 10px;
        }

Any suggestions?

Steve Gates
  • 195
  • 1
  • 12
  • http://html2canvas.hertzen.com – xrisk Aug 17 '15 at 21:23
  • These could help: [Capture HTML Canvas as gif/jpg/png/pdf?](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) -- [How can I convert an HTML element to a canvas element?](http://stackoverflow.com/questions/2732488/how-can-i-convert-an-html-element-to-a-canvas-element) – pdenes Aug 17 '15 at 21:25

2 Answers2

0

This is much more complicated than you might imagine(especially if you’re planning to take “screenshots” of arbitrary content). Fortunately, there’s a JS library that does this!

http://html2canvas.hertzen.com

xrisk
  • 3,790
  • 22
  • 45
0

I don't think that there is a way to "screenshot" an elemement. I think that you will have to use a canvas element and then save the canvas content as a picture. Read more about it here:

How to take screenshot of a div with JavaScript?

Community
  • 1
  • 1
hetasbo
  • 92
  • 8