html2canvas处理横向滚动条和纵向滚动条，超出可视窗口解决方案

原创已于 2024-04-25 17:47:09 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-04-25 17:38:18 首次发布

文章介绍了如何使用JavaScript库html2canvas将网页中的DOM元素转换为图片，包括获取元素的实际宽高、处理跨域图片、以及处理截图生成成功和失败的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

生成图片前

生成图片后

代码片段

handleImg() {
      const element = document.querySelector('.pop-table-box') // 要转换成图片的DOM元素
      const width = element.scrollWidth // 获取元素实际宽度
      const height = element.scrollHeight // 获取元素实际高度
      element.style.height = height + 'px' // 暂时改变纵向滚动条高度，等于实际高度
      this.submitLoading('生成图片中...')
      html2canvas(element, {
        width: width,
        height: element.offsetHeight,
        windowWidth: width + 240, // 少多少宽度补多少宽度，会少一部分数据，我自己加上了，没找到原因
        scale: 1, //设置放大的倍数
        useCORS: true // 如果页面中有跨域图片，确保设置为true
      })
        .then((canvas) => {
          this.popImg = canvas.toDataURL('image/png') // 转换为DataURL格式的图片
          if (this.popImg) {
            this.msgSuccess('生成成功')
          } else {
            this.msgError('生成失败')
          }
          element.style.height = '300px' // 成功之后把高度改回来
          this.submitLoading().close()
        })
        .catch(() => {
          this.submitLoading().close()
        })
    },