zoukankan      html  css  js  c++  java
  • 使用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中。

  • 相关阅读:
    脏读、不可重复读、幻读
    数据库一致性
    java 不同时间格式转化
    python-walk遍历目录及查找目录小例子
    python_os模块
    python_time模块
    exec和eval内置函数
    python-filter函数
    python-map函数
    python_内置函数
  • 原文地址:https://www.cnblogs.com/ljzc002/p/9492088.html
Copyright © 2011-2022 走看看