用Javascript开发网页截屏插件

实现思路用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中并没有响应它的事件，我打开它的控制台刷新才执行了。