我有一个包含多个变量的设置,用户可以通过这些变量来改变元素的直观表示.所有这些都由
jquery脚本控制.如果有一种方法可以根据浏览器的呈现方式保存结果图像,那将会很酷.它与用户视角下的屏幕捕获没有什么不同,尽管它只捕获相关区域.
我有一个名为Page Saver的FF插件,它的功能几乎就是我想要的,但如果可能的话,还有jquery或常规的javascript.
解决方法
编辑：此方法仅适用于Firefox扩展.
您可以使用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','');
};
您可以调整顶部,左侧,宽度和高度以仅捕获网页的一部分.
结果是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);
});
编辑：要使用JQuery将其发送到您的服务器,您可以执行以下操作：
$("#send-capture-button").click(function() {
$.post("/url-to-send-image-to",{image_data: capture()})
});
在服务器端,您必须解码数据URL.
