Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
550 views
in Technique[技术] by (71.8m points)

javascript - 如何在JavaScript客户端中对网站进行屏幕截图/ Google是如何做到的? (无需访问硬盘)[重复](How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD) [duplicate])

This question already has an answer here:

(这个问题已经在这里有了答案:)

I'm working on web application that needs to render a page and make a screenshot on the client (browser) side.

(我正在开发需要呈现页面并在客户端(浏览器)端进行屏幕截图的Web应用程序。)

I don't need the screenshot to be saved on the local HDD though, just kept it in RAM and send it to the application server later.

(不过,我不需要将屏幕快照保存在本地HDD上,只需将其保存在RAM中,然后将其发送到应用程序服务器即可。)

I researched:

(我研究了:)

  1. BrowserShots alike services...

    (BrowserShots类似服务...)

  2. Mechanized browsers...

    (机械化浏览器...)

  3. wkhtmltoimage...

    (wkhtmltoimage ...)

  4. Python WebKit2PNG...

    (Python WebKit2PNG ...)

But none of those gives me all I need, which is:

(但是这些都不能满足我的需求,那就是:)

  1. Processing at browser side (generate screenshot of page).

    (在浏览器端进行处理(生成页面的屏幕截图)。)

    Don't need to be saved on HDD!

    (不需要保存在硬盘上!)

    Just...

    (只是...)

  2. ...send image to Server for further processing.

    (...将图像发送到服务器进行进一步处理。)

  3. Capturing whole page (not only visible part)

    (捕获整个页面(不仅可见部分))

Eventually I came upon Google's Feedback Tool (click "feedback" on YouTube footer to see this).

(最终,我使用了Google的反馈工具(点击YouTube页脚上的“反馈”即可看到此信息)。)

It contains JavaScript for JPG encoding and two other huge scripts which I can't determine what exactly they do...

(它包含用于JPG编码的JavaScript和另外两个庞大的脚本,我无法确定它们到底在做什么……)

But it's processed on the Client side - otherwise there would be no point putting this huge JPEG encoder in the code!

(但是它是在客户端进行处理的-否则,将这个巨大的JPEG编码器放入代码中毫无意义!)

Anyone have any idea how did they made it / how I can make it?

(任何人都知道他们是如何做到的/我怎么做到的?)

Here is an example of the feedback (report a bug on some screens)

(这是反馈的示例(在某些屏幕上报告错误))

反馈/报告错误示例

  ask by Pawe? Szymański translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

" Using HTML5/Canvas/JavaScript to take screenshots " answers your problem.

(“ 使用HTML5 / Canvas / JavaScript进行屏幕截图 ”回答了您的问题。)

You can use JavaScript/Canvas to do the job but it is still experimental.

(您可以使用JavaScript / Canvas来完成这项工作,但仍处于试验阶段。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...