jquery转存HTML为图片,使用Jquery编译/保存/导出HTML作为PNG图像

编辑：此方法仅适用于Firefox扩展.

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', '');

};

您可以调整顶部,左侧,宽度和高度以仅捕获网页的一部分.

结果是data 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);

});

你的插件可能使用这种方法.您还可以查看其源代码.

编辑：要使用JQuery将其发送到您的服务器,您可以执行以下操作：

$("#send-capture-button").click(function() {

$.post("/url-to-send-image-to", {image_data: capture()})

});

在服务器端,您必须解码数据URL.