Vue使用 html2canvas 进行当前页截屏

进行活动也开发时，客户端(IOS)那边反馈说截屏不能自定义长宽去截取，可能会截取到手机顶部栏、时间，后面经过我的深度研究(ge zhong bai du)，发现H5这边可以用插件并且按需截取图片

整体思路

step 1: 安装 html2canvas 依赖

cnpm i html2canvas

step 2: 在要使用的组件内引入

import html2canvas from 'html2canvas'

step 3: 组件内定义方法

onSelect(option) {
      html2canvas(this.$refs.bill, { // 这里的ref指向要截取的dom
        useCORS: true, // 这里针对跨域获取的图片，有效解决截取后图片为空白问题
        scale: window.devicePixelRatio // 解决图片不清晰问题
      }).then((canvas) => {
        this.imgRes = canvas.toDataURL('image/jpg')
        this.shareShow = false
        this.targetOption = option
        this.loadShow = true
        this.UploadImg() // 这里的定义方法是将图片提交到后台
      })
    }

另外还遇到了个截取后的图片体积大提到到后台请求超时的问题，这里可以使用lrz插件

step 4: 安装 lrz 依赖

cnpm i lrz

step 5: 在要使用的组件内引入

import lrz from 'lrz'

step 6: 使用引入的lrz

// 压缩图片
      lrz(this.imgRes, { quality: .8 }) // 控制压缩后的图片质量
        .then(function (rst) {
          let imgBase = _this.base64ToBlob(rst.base64) // 将base64转化为blob文件类型
          let formData = new FormData()
          formData.append('file', imgBase) // 这里的formData就是要传给后端的参数
        })
        .catch(function (error) {
          //失败时执行
          console.log(error)
        })
        .always(function () {
          //不管成功或失败，都会执行
        })

图片清晰度优化

这里代码里有提到过，使用将插件配置项的scale属性设为 window.devicePixelRatio，前提条件：图片是在img标签里面，而不是在div的background-image属性里面

（ps: 这里真的是巨坑，一开始遇到图片模糊以为是插件配置有问题，然后深思熟虑ge zhong bai du了很久，什么将canvas先放大再缩小，还有修改源码的，各种骚操作都试过了一遍，最后差点改为使用domtoimg插件，然后阴差阳错地发现，原来是图片放的地方有问题，无语23333333）

附上Blob转base64的方法

base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },

若是想了解html2canvas插件的其他配置项，可参考以下链接

插件链接: html2canvas官方文档.