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

有些时候我们无法用常规的截图工具截取网页内容，这时可以尝试以下方法：

1、首先允许跨域，chrome浏览器可以在快捷方式-》属性-》目标栏里添加：

--disable-web-security --user-data-dir=d:\mychromedev

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

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

2、ctrl+s将网页保存到本地

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

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。

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