vue中使用html2canvas

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

前言

最近开发中总是遇到要下载页面内容成为图片的情况，以前也用过要截取视频并添加内容做成图片的情况，下面做一下记录

安装

npm install html2canvas

导入

import html2canvas from 'html2canvas'

直接截取dom的操作

downloadBtn (url) {
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      const canvasBox = document.getElementById('qr-section')
      html2canvas(canvasBox).then((canvas) => {
        const dataURL = canvas.toDataURL('image/jpg')
        // 下载图片
        this.downloadImage(dataURL)//这里是base64
        // 显示
      var share = document.getElementById('shareImg')
      share.src = dataURL
      })
    },
     downloadImage (url) {
      const link = document.createElement('a') // 创建超链接用于下载操作
      link.href = url
      link.setAttribute('download', '***.png')
      link.click()
    },

使用场景

一般用于截取图标或者页面其它的dom结构，但要注意的是html2canvas不支持截取iframe标签内的内容，如果截取了iframe中的内容得到的会是一个空白的图片。

配置项

html2canvas(canvasBos,options),这里的options是html2canvas的配置项，常用的配置项有一下几个

• allowTain：boolean 是否截取带有跨域的图片
• width 设置canvas的宽度
• height 设置canvas的高度
• userCORS ：boolean 是否尝试从服务端加载图像 其它属性还有很多，如下图

这里面有个有意思的属性就是你可以选择隐藏某些元素不出现在你的画布上，那就是ignoreElements属性，具体的使用方法如下：

//注意：这里可以是id也可以是类名，如果你没有设置id那就会报错，类名的判断用classList,element.classList.contains('save')
 html2canvas(canvasBox，{
   ignoreElements:(element)=>{
if(element.id==='testElement')
 return true;
 }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/jpg')
        // 下载图片
        this.downloadImage(dataURL)//这里是base64
        // 显示
      var share = document.getElementById('shareImg')
      share.src = dataURL
      })

除了上述的隐藏方法外还有一种方法，那就是给标签直接加data-html2canvas-ignore 比如这样：<span data-html2canvas-ignore class="num">{{ text }}</span>

遇到的坑

在使用过程中本来一起顺利，截图也很正常，但用着用着突然出现了有的截图会截取不全，造成这个问题的原因主要是因为页面太长出现了滚动条，当页面滚动到下面再截取的话就会出现截取到的内容不全的情况，甚至是截取到空白图，解决办法就是在截取的时候让页面回到顶部。

      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0