javascript - 允许用户获取部分网页的 'screenshot'

Question

我正在尝试允许用户捕获我的目标元素(段落)的屏幕截图网页，然后在 div(而非 Canvas )上显示捕获的屏幕截图，他们可以在其中下载屏幕截图。

这是我正在努力完成的视觉效果:http://i.imgur.com/049R8ca.png

这是我目前尝试的方法:

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;
        }

有什么建议吗？

Answer 1

这比您想象的要复杂得多(尤其是当您打算对任意内容进行“截图”时)。幸运的是，有一个 JS 库可以做到这一点!

http://html2canvas.hertzen.com