实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片。
html2canvas(document.body, {
onrendered: function(canvas) {
//将canvas转成base64
console.log(canvas.toDataURL());
}
});
最后将base64的数据赋值给a标签的href属性,并且给a标签加上downlaod属性即可实现下载。
html2canvas.js将元素转成canvas的原理好像是通过svg实现的,如果你感兴趣可以研究一下。
如果想实现通用的网站截图工具,那么可以制作成一个chrome插件,这里我已经写好了,需要的可以下载。
写插件的时候遇到一个问题,就是在测试环境下,content_scripts中向browser_action中发送数据,但在browser_action中并没有响应它的事件,我打开它的控制台刷新才执行了。