第一步安装: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);})})
}
缺点:截图时间特别长,视频截图是黑屏,暂时还没解决,大家有解决的欢迎指正~