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