编辑:此方法仅适用于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.