使用 Jquery 将 HTML 编译/保存/导出为 PNG 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5941631/
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
Compile/Save/Export HTML as a PNG Image using Jquery
提问by C_K
I have a set-up with multiple variables that users can alter that effect a visual representation of an element. All of this is controlled by jquery scripts. It would be cool if there was a way to save the resultant image as per what the browser renders. It'd be no different than a screencapture from a user perspective, though it would only capture the relevant area.
我有一个包含多个变量的设置，用户可以改变它来影响元素的视觉表示。所有这一切都由 jquery 脚本控制。如果有一种方法可以根据浏览器呈现的内容保存结果图像，那将会很酷。从用户的角度来看，它与屏幕截图没有什么不同，尽管它只会捕获相关区域。
I have a plugin for FF called Page Saver, and it's functionality is pretty much what i am looking for, but with jquery or regular javascript if possible.
我有一个名为 Page Saver 的 FF 插件，它的功能几乎是我正在寻找的，但如果可能的话，使用 jquery 或常规 javascript。
I'm more asking for tips, and a general direction that you guys would advise me to go in in order to pursue such functionality. I'd prefer not to learn another language to do this, but if i must...
我更多地要求提示，以及你们建议我去追求这样的功能的一般方向。我不想学习另一种语言来做到这一点，但如果我必须......
回答by Micha?l Witrant
Edit : This method only works in Firefox extensions.
编辑：此方法仅适用于 Firefox 扩展。
You can use HTML5 canvas, Firefox' drawWindowand the toDataURLmethod. For example:
您可以使用HTML5 canvas、Firefox 的drawWindow和toDataURL方法。例如：
var capture = function() {
var root = document.documentElement;
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');
var context = canvas.getContext('2d');
var selection = {
top: 0,
left: 0,
width: root.scrollWidth,
height: root.scrollHeight,
};
canvas.height = selection.height;
canvas.width = selection.width;
context.drawWindow(
window,
selection.left,
selection.top,
selection.width,
selection.height,
'rgb(255, 255, 255)'
);
return canvas.toDataURL('image/png', '');
};
You can adjust top, left, widthand heightto capture only a part of the web page.
您可以调整top，left，width并且height只捕捉网页的一部分。
The result is a data URIstring. You can send it to your server or draw it on another canvas:
结果是数据 URI字符串。您可以将它发送到您的服务器或在另一个画布上绘制它：
var canvas = document.getElementById('captured');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = capture();
// the image is not immediately usable
$(image).load(function() { // jquery way
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
});
Your plugin probably uses this method. You can also check its source code.
您的插件可能使用这种方法。您还可以检查其源代码。
Edit: To send it to your server with JQuery you can do something like that:
编辑：要使用 JQuery 将其发送到您的服务器，您可以执行以下操作：
$("#send-capture-button").click(function() {
$.post("/url-to-send-image-to", {image_data: capture()})
});
On the server side you'll have to decode the data URL.
在服务器端，您必须解码数据 URL。
回答by Alex Wayne
There is no JS functionality built into browsers that would allow you turn an image into HTML sadly. So you would need something like a browser plugin or extension installed that has a JS API that you can call into. But even then, it would obviously require that plugin be installed on that persons browser.
浏览器中没有内置的 JS 功能可以让您遗憾地将图像转换为 HTML。因此，您需要安装诸如浏览器插件或扩展程序之类的东西，这些插件或扩展程序具有可以调用的 JS API。但即便如此，显然也需要在该人的浏览器上安装该插件。
