Question

我正在尝试允许用户捕获我的目标元素（段落）的屏幕截图网页，然后在div（不是画布）上显示捕获的屏幕截图，他们可以下载屏幕截图。

以下是我正在努力实现的目标：http://i.imgur.com/049R8ca.png

到目前为止，我已尝试：

HTML

NoMethodError: undefined method []' for #<Parse::Pointer:0x007fc3e3122dd0> from
/Users/abarro/projects/parse/client.rb:142:in block in get_user_photos_of_month' from
/Users/abarro/projects/parse/client.rb:142:in each' from
/Users/abarro/projects/parse/client.rb:142:in find_all' from
/Users/abarro/projects/parse/client.rb:142:in get_user_photos_of_month' from
(irb):15 from
/Users/abarro/.rvm/rubies/ruby-2.2.0/bin/irb:11:in <main>'

JS

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

CSS

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

有什么建议吗？

Answer 1

这比你想象的要复杂得多（特别是如果你打算拍摄任意内容的“截图”）。幸运的是，有一个JS库可以做到这一点！

http://html2canvas.hertzen.com

Answer 2

我不认为有一种方法来截图＆＃34;一个元素。我认为你必须使用canvas元素，然后将画布内容保存为图片。在这里阅读更多相关信息：

How to take screenshot of a div with JavaScript?

允许用户截取网页部分的“屏幕截图”

2 个答案: