【vue】前端使用modern-screenshot截取屏幕截图
modern-screenshot介绍
modern-screenshot是一款轻量级的JavaScript库,能够让您以数据URL或多种格式(如PNG、SVG、JPEG、WebP)保存网页元素的截图。它源于html-to-image项目,经过优化,提供更现代的解决方案,并支持Singleton上下文和Web Worker,使得连续截图速度更快。
导入
npm i modern-screenshot
封装与使用(也可以直接在页面中使用)
js中:
可以根据自己需求修改为动态传递dom,配置中屏幕宽高可根据自己需求更改或直接设置(不设置会根据div大小自适应),这里需求是大屏固定尺寸故直接传参写死。
import {domToJpeg} from "modern-screenshot";
/*
* 获取屏幕截图方法
* **/
export async function downloadImage() {const node = document.getElementById('container')if (!node){console.log("找不到dom,终止导出")return ;}try {const dataUrl = await domToJpeg(node, {// 传入配置scale: 3,width:2560,height:1440});// 通过a标签自动下载图片const a = document.createElement('a');a.href = dataUrl;a.download = new Date().getTime() + '.jpg';a.click();a.remove();ElMessage.success('图片生成成功,请耐心等待下载');}catch (error) {ElMessage.error('图片生成失败');}}
页面中调用(vue3):
import {downloadImage} from "@/utils/global";
function downImg() {downloadImage()
}