当前位置：首页 > article >正文

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

article 2024/11/14 10:08:54

第一步安装：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解决图片跨域，然后再设置 src
      img.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);
      })
  })
}