使用 Javascript 将 HTML 页面转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12703124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert HTML page into image using Javascript
提问by Rama Rao M
Hi,
你好，
EDIT: I want to achieve it by with out using any third party software..My application is a SAP product and I cannot go to every customer and install that software in his system.
I have the following scenario..
There is a button in my webiste(ofcourse,its a business applicaion) named "Save as image".so whenever user presses that button the content of the page has to be converted to image file and saved in his system.
Can we achieve it by either javascript or jquery?
If we cannot do it in javascript ,can we do it in SAP BSP,since my application is being developed in SAP BSP?
编辑：我想在不使用任何第三方软件的情况下实现它。我的应用程序是 SAP 产品，我不能去每个客户的系统中安装该软件。
我有以下场景..
在我的网站（当然，它是一个商业应用程序）中有一个名为"Save as image".so 的按钮，每当用户按下该按钮时，页面内容都必须转换为图像文件并保存在他的系统中。
我们可以通过 javascript 或 jquery 来实现吗？
如果我们不能在 javascript 中完成，我们可以在 SAP BSP 中完成，因为我的应用程序是在 SAP BSP 中开发的吗？
I had already searched in this site and found one solution which only works in Firefox extesnion. But I need a cross-browser solution which must work for IE,Chromer,ect.
我已经在这个网站上搜索过，找到了一个只适用于 Firefox 扩展的解决方案。但我需要一个必须适用于 IE、Chromer 等的跨浏览器解决方案。
回答by Mikko Ohtamaa
The way to do this would be render the HTML page in hidden <canvas>element and then saving the canvas content as an image.
这样做的方法是在隐藏<canvas>元素中呈现 HTML 页面，然后将画布内容保存为图像。
It is possible, but you won't have perfect rendering output or a solution working on legacy browsers.
这是可能的，但您不会有完美的渲染输出或在旧浏览器上工作的解决方案。
Please see
请参见
https://stackoverflow.com/a/12660867/315168
https://stackoverflow.com/a/12660867/315168
for more information.
想要查询更多的信息。
Alternatively submit a stateless page URL to the server-side where a headless browser renders the page and takes a screenshot using Selenium automation. If the page is public some web services exist for this too.
或者，将无状态页面 URL 提交到服务器端，其中无头浏览器呈现页面并使用 Selenium 自动化截取屏幕截图。如果该页面是公开的，则也存在一些用于此的 Web 服务。
回答by peter
One easy but partial IE solution, it uses ActiveX so not crosswbrowser and a general one that is a bit more cumbersome
一种简单但不完整的 IE 解决方案，它使用 ActiveX，因此不是跨浏览器，而且是一种比较麻烦的通用解决方案
The IE solution
IE解决方案
function printScreen(){
var oWordBasic;
if (window.ActiveXObject){
oWordBasic = new ActiveXObject("Word.Basic");
oWordBasic.SendKeys('%{1068}');
oWordBasic.SendKeys('%{PRTSC}'); //or if the above doesnt work..
//save or transfer the clipboard contensts
}
}
The general solution:
一般解决方案：
Use a screen capture utility like Gadwin PrintScreen http://www.gadwin.com/printscreen/, it's for windows but i'm sure there are the like for Linux and Mac. You can define a hotkey and let this save the image to a fixed location with autonumbering. The program doesn't need to be installed, it's portable so it can reside on a networkshare.
使用像 Gadwin PrintScreen http://www.gadwin.com/printscreen/这样的屏幕捕获实用程序，它适用于 Windows，但我确定 Linux 和 Mac 也有类似的工具。您可以定义一个热键，并通过自动编号将图像保存到固定位置。该程序不需要安装，它是可移植的，因此可以驻留在网络共享上。
回答by Misiakw
you may also try to create java applet or jar included into site that would capture some part of the screen or browser. i saw mechanism for real time screen sharing based on jar loaded files, but i didn't see the code.
您还可以尝试创建包含在站点中的 Java 小程序或 jar，以捕获屏幕或浏览器的某些部分。我看到了基于 jar 加载文件的实时屏幕共享机制，但我没有看到代码。
here is some lib for java html into image conversion http://code.google.com/p/java-html2image/
这是 java html 到图像转换的一些库 http://code.google.com/p/java-html2image/
heres simmilar topic How to capture selected screen of other application using java?
Heres simmilar topic 如何使用java捕获其他应用程序的选定屏幕？
