基于html2canvas实现网页保存为图片及图片清晰度优化

比眉伴天荒 2023-02-12 05:54 218阅读 0赞

参考：[https://segmentfault.com/a/1190000011478657?utm\_source=tag-newest][https_segmentfault.com_a_1190000011478657_utm_source_tag-newest]

1、从“[https://github.com/niklasvh/html2canvas/releases][https_github.com_niklasvh_html2canvas_releases]”下载“html2canvas.js”保存到网站目录“dist”

2、从“[https://github.com/niklasvh/html2canvas][https_github.com_niklasvh_html2canvas]”下载源码，运行“examples”目录下的demo.html

3、改写demo.html，再运行。会看到<body>内容完全复制了一份：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
          display/box/float/clear test
        </title>
      
      </head>
      <body>
        <div id="target">	文章开始：北京时间5月19日,据《日经亚洲评论》报道,视频会议公司Zoom已经暂停在中国的个人用户注册,将仅支持企业用户购买其服务,从5月1日起,中国的个人免费用户已无法发起会议。其实,从4月下旬,笔者登录Zoom时就看到即将暂停服务的通知,相信很多用户都和笔者一样,好不容易适应了被Zoom支配的恐惧,却又陷入如何找到替代Zoom,甚至比Zoom更好一款应用的恐惧中。
    
    
    5月初,笔者注意到一款名为快会的app就因提供免费视频会议服务,在短短20天里经历了从替代品到必需品的蜕变,成为原Zoom用户的不二之选。当然,除了快会布局市场战争,有针对性地快速推出免费版解决用户收费的痛点外,真正留住大批Zoom用户的,还是快会强大的产品功能所带来可靠舒适、便捷高效的会议体验。
    
    更方便、更兼容、更具互动感,引爆产品性能价值
    
    Zoom因登入方式简易、顺滑,实现会议室终端、PC、平板电脑、手机等多终端接入的高产品协同性以及多样性的产品和差异化的付费机制吸引了大量的用户。
    
    面对Zoom 退出中国市场,快会从客户需求出发,以硬核的产品性能和技术解决用户痛点,给客户创造更多方便,快速占领市场。经此一役,快会实现了跨越式成长,正成为互联网巨头们林立的远程办公战场中不可忽视的重量级玩家。文章结束。
    	</div>
        <script type="text/javascript" src="dist/html2canvas.js"></script>
        <script type="text/javascript">
            html2canvas(document.body).then(function(canvas) {
                document.body.appendChild(canvas);
            });
        </script>
      </body>
    </html>

[https_segmentfault.com_a_1190000011478657_utm_source_tag-newest]: https://segmentfault.com/a/1190000011478657?utm_source=tag-newest
[https_github.com_niklasvh_html2canvas_releases]: https://github.com/niklasvh/html2canvas/releases
[https_github.com_niklasvh_html2canvas]: https://github.com/niklasvh/html2canvas