js实现截图，使用 html2canvas canvas2image 保存图片

本文链接：https://blog.youkuaiyun.com/Sunshine_night/article/details/91882914

本文介绍如何使用html2canvas和canvas2image插件将网页中的指定元素截图并保存为图片。通过jQuery选择器选取目标元素，调整截图位置，并设定图片质量与格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

截图获取某个元素作为图片保存

<h2>原始HTML</h2>
<div style="background:red;width: 750px;" class="test">
    <img src="img/20190613113648.png"/>
    <div id="qrcode">
        <img src="img/app.png">
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript">
    var test = $(".test").get(0); //将jQuery对象转换为dom对象
    // 点击转成canvas
    $('.toCanvas').click(function(e) {
        // 调用html2canvas插件
        html2canvas(test,{
            x:0, //可以通过 test.offsetLeft DOM对象的 offsetLeft，如果元素本身有定位，就要注意相对位置了
            y:200 ////可以通过 test.offsetTop DOM对象的 offsetTop，如果元素本身有定位，就要注意相对位置了
        }).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 调用Canvas2Image插件
            Canvas2Image.setQualityArgument(0.5);  //设置图片压缩比，默认为 1 不压缩，只有 jpg | webp 压缩比才会生效
            Canvas2Image.saveAsImage(
                canvas,
                canvasWidth, //图片宽度
                canvasHeight, //图片高度
                'jpg',   //图片类型
                'saveImage'  //保存的图片名字
            );
        });
    });
</script>

稍微修改了一下 canvas2image.js，下载地址为
http://www.ourmimi.top/canvas2image.js