js + html2canvas 实现截图

html：

<div style="margin: 160px 200px;">
    <div id="html2canvas" style="display: flex;">
        <div>
            <img class="qrcode_img" src="" alt="" style="width: 115px;height: 115px;;display: block;background-color: red;">
        </div>
        <div>
            <ul class="qrcode_text">
                <li><span>品种：</span><a>哈哈哈哈</a></li>
                <li><span>产地：</span><a>哈哈哈哈</a></li>
                <li><span>生产日期：</span><a>2020-15-18</a></li>
                <li><span>详细信息：</span><a>哈哈哈哈</a></li>
            </ul>
        </div>
    </div>
    <div class="area-screenShot" style="margin: 30px 100px;">
        <button id="screenShot">生成图片</button>
    </div>
</div>

<script type="text/javascript" src="../js/included/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../js/included/html2canvas/html2canvas.js"></script>

粗糙js法：

// 第一种最粗糙的写法：可以得到图片，但图片不清晰，并且图片的大小没有设置，截取位置固定
$("#screenShot").click(() => {
   
    html2canvas($("#html2canvas")).then(canvas => {
   
        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        /** 写法一：简单，但不好设置下载图片默认名字*/
        window.location.href = imgUri;

        /** 写法二：利用 <a> 标签特性实现下载，可以设置默认图片名*/
        // let aLink = document.createElement("a");
        // aLink.style.display = "none";
        // aLink.href = imgUri;
        // aLink.download = "溯源码.png"; // 设置文件的默认保存名字
        // document.body.appendChild(aLink);
        // aLink.click();
        // document.body.removeChild(aLink);
    });
});

详细js写法：

// 第二种写法： 可以任意设置图片大小，随意定位截图位置，并得到清晰图片
$("#screenShot").click(() => {
   
    const dom = $("#html2canvas")[0];

    /** * 利用画布的可缩放特性实现高清截图 */
    const Canvas = document.createElement('canvas'); // 创建一个新的canvas

    const width = dom.offsetWidth; // 要截图区域的宽
    const height = dom.offsetHeight; // 要截图区域的的高
    const scale = window.devicePixelRatio; // 设备的像素比

    // 设置画布
    Canvas.width = width * scale;
    Canvas.height = height * scale;
    Canvas.getContext('2d').scale(scale, scale); // 缩放
    // 画布从(0,0)移动到截取区域的左上角，只有这个这样，画布才能完美覆盖截图区域
    Canvas.getContext('2d').translate(-dom.getBoundingClientRect().left, -dom.getBoundingClientRect().top);

    html2canvas(dom, {
    // 这里面都是转换的参数
        canvas: Canvas,
        useCORS: true, // 是否允许跨域
        width: width + 'px', // 设置画布的宽高
        hegiht: height + 'px',
    }).then((canvas) => {
   
        const context = canvas.getContext('2d');
        // 关闭抗锯齿形，使得文字更有线条
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        var imgData = canvas.toDataURL("image/png");

        let aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = imgData;
        aLink.download = "溯源码.png";
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
    });
});