使用html2canvas将html标签转化为图片

有些时候咱们没法用常规的截图工具截取网页内容，这时能够尝试如下方法：

一、首先容许跨域，Chrome浏览器能够在快捷方式-》属性-》目标栏里添加：

 --disable-web-security --user-data-dir=D:\MyChromeDev

第一句是禁用网页安全，第二句是使用另外一个用户数据目录，这样将不会显示收藏夹、插件等（其实不影响截图）。

注意，两处“--”前都有空格。

二、Ctrl+s将网页保存到本地

三、打开本地保存的网页，在浏览器控制台中执行：

 1 var script = document.createElement("script");
 2 
 3 script.type = "text/javascript";
 4 
 5 script.src ="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-
 6 
 7 alpha.12/html2canvas.min.js";
 8 
 9 //"http://html2canvas.hertzen.com/dist/html2canvas.min.js";//备用
10 
11 document.body.appendChild(script);
12 
13 html2canvas(document.querySelector(".Post-Main,.Post-NormalMain")).then(canvas => {
14     document.body.appendChild(canvas);  //将canvas显示在当前的窗口中，右键图片另存为便可  
15 });

这样就能够将一个很长的标签保存成一张图片。

注意、新版Chrome浏览器再也不支持直接在新标签中打开dataurl。

注二、在控制台中对样式的修改不会体如今生成的canvas中。