html2canvas 实现js截图，

1、导入包

安装包

npm install html2canvas

导入
import html2canvas from "html2canvas";

import * as imageConversion from 'image-conversion';//压缩文件用

2、代码如下

<el-button class="button-dalod" size="mini" title="生成图片" @click="toImage()" icon="el-icon-download"></el-button>

<div ref="imageTofile"></div>

vue 中添加如下method

    toImage () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        // 手动创建一个 canvas 标签
        const canvas = document.createElement("canvas")
        // 获取父标签，意思是这个标签内的 DOM 元素生成图片
        // imageTofile是给截图范围内的父级元素自定义的ref名称
        let canvasBox = this.$refs.imageTofile
        // 获取父级的宽高
        const width = parseInt(window.getComputedStyle(canvasBox).width)
        const height = parseInt(window.getComputedStyle(canvasBox).height)
        // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
        canvas.width = width
        canvas.height = height
        canvas.style.width = width + 'px'
        canvas.style.height = height + 'px'
        const context = canvas.getContext("2d");
        context.scale(1, 1);
        const scale = window.devicePixelRatio;
        const options = {
            backgroundColor: "#FFFFFF",
            canvas: canvas,
            useCORS: true,
            scale,
        }
        html2canvas(canvasBox, options).then((canvas) => {
            // toDataURL 图片格式转成 base64
            let dataURL = canvas.toDataURL("image/png")
           // console.log(dataURL,"dataURL")
            let file = this.dataURLtoFile(dataURL)
            let vm = this;

        //指定图片压缩质量0.4，值越小，压缩率越高
            imageConversion.compress(file,0.4).then(res=>{
                console.log("resres",res,"res")
                const reader = new FileReader()
                reader.readAsDataURL(res)
                reader.onload = function(e) {
                    vm.downloadImage( e.target.result)
                }
            });
         /*

//指定大小压缩，参数100表示100k

imageConversion.compressAccurately(file, 100).then(res => {
            console.log(res)
            const reader = new FileReader()
            reader.readAsDataURL(res)
            reader.onload = function(e) {
                console.log( e.target.result,"yyy")
                vm.downloadImage( e.target.result)
            }
        });*/
        })
    },
    //下载图片
    downloadImage(url) {
        // 如果是在网页中可以直接创建一个 a 标签直接下载 
        let a = document.createElement('a')
        a.href = url
        a.download = '首页截图'
        a.click()
    },
    dataURLtoFile(dataurl) {
        var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        //console.log(mime,"mime")
        return new File([u8arr], { type: mime });
    },