使用dom-to-image截图html区域为一张图

第一步安装：npm i dom-to-image
第二步引入：import domToImage from 'dom-to-image';
第三步截图：

// 截图
function screenshot() {return new Promise((resolve, reject) => {const images = document.querySelectorAll('.isCrossOrigin'); //给需要截图的图片都加上clss名称便于获取const videos = imageWrapper.value.querySelectorAll('video'); // 获取画布下所有视频元素// 隐藏所有视频元素，因为截出来的视频是黑屏videos.forEach((video) => {video.style.display = 'none';});images.forEach((img) => {// 保存原始的图片地址const originalSrc = img.getAttribute('src');// 移除 src 属性，设置 crossOrigin解决图片跨域，然后再设置 srcimg.removeAttribute('src');img.crossOrigin = 'anonymous';img.src = originalSrc;});domToImage.toBlob(imageWrapper.value, {cacheBust: true,  //添加 cacheBust 选项以确保不会使用缓存图片width: bgSrcWidth.value,height: bgSrcHeight.value,}).then(function (blob) {// 截图成功后，去除跨域设置images.forEach((img) => {img.removeAttribute('crossOrigin');});// 显示视频元素videos.forEach((video) => {video.style.display = 'block';});const formData = new FormData();formData.append('file', blob, 'image.png');uploadBgImg(formData).then((res) => {resolve(res.data)})}).catch((err) => {// 如果出现错误，去除跨域设置并恢复所有视频元素images.forEach((img) => {img.removeAttribute('crossOrigin');});videos.forEach((video) => {video.style.display = 'block';});reject(err);})})
}