使用html2canvas将html标签转化为图片
程序员文章站
2023-08-26 15:24:57
有些时候我们无法用常规的截图工具截取网页内容,这时可以尝试以下方法: 1、首先允许跨域,Chrome浏览器可以在快捷方式-》属性-》目标栏里添加: --disable-web-security --user-data-dir=D:\MyChromeDev 第一句是禁用网页安全,第二句是使用另一个用户 ......
有些时候我们无法用常规的截图工具截取网页内容,这时可以尝试以下方法:
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中。
上一篇: form表单提交
推荐阅读
-
vue 使用html2canvas将DOM转化为图片的方法
-
vue 使用html2canvas将DOM转化为图片的方法
-
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
-
使用html2canvas将html标签转化为图片
-
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
-
使用html2canvas将html标签转化为图片
-
Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地
-
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片