解决html2canvas图片模糊不清，超出一页长截图问题

前言

最近需要做一个页面截图功能，类似QQ、微信截图功能，核心是将Html网页转换成图片格式，并且尽可能保证截图后图片样式和原网页一致。对比了一些第三方插件以及浏览器自带的API，最终选择使用JavaScript库‌：如html2canvas，可以实现一键生成HTML任意元素截图的功能。

‌html2canvas是一个JavaScript库，用于将HTML元素渲染为Canvas元素，实现网页内容的截图功能‌。
‌功能‌：html2canvas允许直接在用户浏览器截取页面或部分网页的“屏幕截屏”。它基于DOM，根据页面上可用的信息构建屏幕截图，而不是制作实际的屏幕截图。
‌工作原理‌：html2canvas首先解析网页上指定的HTML元素，包括文本、样式和布局等信息，并构建成一个DOM树的内部表示。然后计算每个DOM元素的样式和布局信息，并将其逐个绘制到隐藏的Canvas元素上，形成最终的截图效果。最后，将Canvas元素内容导出为图片格式。
‌局限性‌：html2canvas不支持跨域图片的截图，且不支持呈现插件内容，如flash或java小程序‌。

1.遇到的问题

1.图片截取后不清晰，像是遮上了一层阴影。
2.如果想截图的部分超出一整个页面，不能完整截图一个长图。
3.一些hmtl标签会导致页面截图后，图片和html看到的效果不一致，例如CSS3动画、过渡、滤镜效果、复杂图形和路径等。

2.解决办法

1.调整清晰度的参数

主要通过调节这两个参数值来使截图的图片更清晰，这是封装了scale、dpi参数的html2canvas.js，下载后引用页面即可

2.获取想截图的内容范围

var width = $('.wrapper-content').outerWidth();   //想截取的标签, wrapper-content为div
var height = $('.wrapper-content').outerHeight();

3.引入库

<script src="/js/screenshot/html2canvas.js"></script>

4.编写方法

代码如下（示例）：

<a href="#" onclick="screenshot();" class="btn btn-sm btn-success">
<i class="fa-solid fa-expand"></i> 屏幕截图</a>

function screenshot() {
    var now = new Date();
    var year = now.getFullYear();
    var month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
    var day = now.getDate().toString().padStart(2, '0');

    var hour = now.getHours().toString().padStart(2, '0');
    var minute = now.getMinutes().toString().padStart(2, '0');
    var second = now.getSeconds().toString().padStart(2, '0');

    layer.load('截图中，请稍后......', 1);
    setTimeout(function() {
        var width = $('.wrapper-content').outerWidth();   //想截取的标签
        var height = $('.wrapper-content').outerHeight();
        html2canvas($('.wrapper-content'), {
            allowTaint: true,
            letterRendering: 1,
            height: height,
            width: width,
            scale: window.devicePiexlRatio, //设备像素比
            background:null
        	}).then(canvas =>{
            // 将canvas转换为图片并下载
            var link = document.createElement("a");
            link.download = year + month + day + ' ' + hour + minute + second + ".png";
            link.href = canvas.toDataURL("image/png");
            link.click();
        }).
        catch(error =>{
            console.error("Screenshot capture failed:", error);
        });
    },1300);
}

参数说明，根据需要设置

这样就可以实现页面截图了，并且只通过网页端就可以实现截图功能。