vue通过dom-to-image实现页面截图功能封装

1、安装  domtoimage

      

npm install dom-to-image

 2、在utils文件下创建文件screenshot.js

       实现代码：

import domtoimage from 'dom-to-image';

export default function screenShotFn(domId) {
    return new Promise((resolve, reject) => {
        let canvas = document.querySelectorAll('canvas');
        console.log(canvas);
        if (canvas && canvas.length > 0) {
            canvas.forEach((can, cani) => {
                // 将 WebGL canvas 转换为图片
                const image = new Image();
                image.src = can.toDataURL();
                //获取canvas父级元素
                let parentDom = can.parentNode;
                console.log(parentDom)
                    // 临时替换原始 WebGL canvas
                parentDom.replaceChild(image, can);
                try {
                    // 截取包含替换后图片的 DOM 元素
                    let node = document.querySelector('#' + domId);
                    domtoimage
                        .toPng(node, { quality: 1 })
                        .then((dataUrl) => {
                            resolve(dataUrl)
                        })
                } catch (err) {
                    reject(err)
                    console.error("截屏失败：", err);
                } finally {
                    if (cani == canvas.length - 1) {
                        parentDom.replaceChild(can, image);
                    }
                    console.log('替换图片成功')
                }
            })
        } else {
            // 截取包含替换后图片的 DOM 元素
            let node = document.querySelector('#' + domId);
            domtoimage
                .toPng(node, { quality: 1 })
                .then((dataUrl) => {
                    resolve(dataUrl)
                }).catch((err) => {
                    reject(err)
                })
        }
    })
}

3、在组件中使用

      

import screenShotFn from "@/utils/screenshot.js"
//aiImplant  为要截取的domID
screenShotFn('aiImplant').then(res=>{
          //res  为返回的截图地址
        })