在用过 html2canvas 和 kscreenshot 之后，我总结一下：二者的工作原理都是将你想要截取的部分通过 canvas 绘制成 base64 字节流类型的，且二者都获取不到有 canvas 画板的部分，在不同分辨率下，样式多多少少跟原本网页有些许不同，在kscreenshot 截取的时候 浮动的地方可能会错位  而且很严重

一.安装依赖

npm i kscreenshot -S

二.实战代码

        因为特殊原因不能将所以代码展示  我就将这一块地方抠出来了  感兴趣的朋友可以粘下来直接用

<template>
    <div class="a">
        <el-button @click="dialogVisible = true" size="small" style="margin-left:30px">打开弹框</el-button>
        <el-dialog :visible.sync="dialogVisible" width="60%">
            <div class="flexdiv">
                <div class="a1">
                    <div style="border-bottom: 1px solid #000;padding-bottom: 20px">
                        <el-button @click="bd" size="small">开始标点</el-button>
                        <el-button @click="jt" size="small" style="margin-left:30px">开始截图</el-button>
                    </div>
                    <div class="istrue">
                        <el-button v-if="isShow" icon="el-icon-check" size="mini"></el-button>
                        <el-button v-if="isShow" icon="el-icon-close" size="mini"></el-button>
                    </div>
                    <div style="position: relative;" id="bigbox">
                        <img class="imged" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                            alt="">
                        <canvas width="770" height="500" id="canvas"></canvas>
                    </div>
                </div>
                <div class="a2">
                    <img class="" :src="imgs" alt="" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import html2canvas from 'html2canvas';
import kscreenshot from 'kscreenshot'
export default {
    data() {
        return {
            dialogVisible: false, // 弹框显示
            src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // canvas内加载图片
            imgs: "", // 弹框右侧显示图片
            positionImg: "", // 截图时   弹出覆盖canvas部分（截图获取不到canvas）
            isShow: false, // 为true时显示 对错按钮
        }
    },
    methods: {
        bd(){
            this.isShow = true // 显示对错按钮
        },
        jt() {
            this.isShow = false // 隐藏对错按钮
            let that = this
            // let save2 = document.getElementById("bigbox");
            // html2canvas(save2).then((canvas) => {
            //     console.log(canvas);
            //     let url = canvas.toDataURL("image/png");
            //     that.positionImg = url;
            //     console.log(that.positionImg);
            // 在canvas画板之上  弹出一个弹出层覆盖canvas部分
            document.getElementsByClassName("imged")[0].style.display = "block"
            // 改截图工具获取不到 canvas画板所绘制的东西  所以先用弹窗显示canvas画板里的东西然后定顶掉
            new kscreenshot({
                key: 65,
                needDownload: false,
                endCB(e) { //截图成功回调
                    that.imgs = e
                    document.getElementsByClassName("imged")[0].style.display = "none"
                },
                cancelCB(e) { //截图失败回调
                    document.getElementsByClassName("imged")[0].style.display = "none"
                }
            }).startScreenShot()
            // })


        },
    },
    watch: {
        dialogVisible: function () {
            if (this.dialogVisible) {
                var that = this
                setTimeout(() => {
                    var can = document.getElementById("canvas")
                    var context = can.getContext('2d')
                    var img = new Image();
                    img.src = that.src
                    console.log(img.width);
                    img.onload = function () {
                        context.drawImage(img, 0, 0, 770, 500);
                    }
                }, 500)
            }
        }
    }

}
</script>

<style scoped lang="scss">
.istrue{
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
}
.imged {
    position: absolute;
    top: 0;
    left: 0;
    width: 770px;
    height: 500px;
    display: none;
}

.a {
    width: 100%;
    height: 100vh;
}

.flexdiv {
    display: flex;
    justify-content: space-between;
}

.a1 {
    width: 70%;
    height: 100%;
    border-right: 1px solid #000;
}

.a2 {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;

    img {
        max-width: 300px;
    }
}
</style>