移动端h5截图与原生iosandroid的兼容交互

Posted 2021-05-17 weixin_39810640

 

项目场景：

h5移动端项目需要生成截图与原生app进行图片分享的交互

---

问题描述：

使用html2canvas 生成h5截图在android app截图位置偏移且偏移量随机

 

android截图

ios截图

---

解决方案：

在IOS使用html2canvas ，Android使用domtoimage

1.https://github.com/niklasvh/html2canvas

2.https://github.com/tsayen/dom-to-image

Android使用domtoimage后截图完整了，但是出现新的问题截图模糊

解决方案：

用canvas重绘截图的同时使用window.devicePixelRatio属性提升图片像素 以免失真

import html2canvas from 'html2canvas'
import domtoimage from 'dom-to-image'

    translateBase64ImgToBlob(base64, contentType) {
      var arr = base64.split(',') //去掉base64格式图片的头部
      var bstr = atob(arr[1]) //atob()方法将数据解码
      var leng = bstr.length
      var u8arr = new Uint8Array(leng)
      while (leng--) {
        u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
      }
      var blob = new Blob([u8arr], { type: contentType })
      var blobImg = {}
      blobImg.url = URL.createObjectURL(blob) //创建URL
      blobImg.name = new Date().getTime() + '.png'
      return blobImg
    },
    base64ToFile(data) {
      // 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
      let binary = atob(data.split(',')[1])
      let mime = data.split(',')[0].match(/:(.*?);/)[1]
      let array = []
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      let fileData = new Blob([new Uint8Array(array)], {
        type: mime
      })
      // eslint-disable-next-line no-unused-vars
      let file = new File([fileData], `${new Date().getTime()}.png`, {
        type: mime
      })
      return file
    },

    /*domtoimage 截图方案
     * 问题：domtoimage在真机表现为图片失真
     * 解决方案：使用toSvg替换toPng， toSvg转换的svg格式转换为base64的图片，用canvas配合 
       window.devicePixelRatio对图片进行高清处理
     */

    shareAndroid() {
      const that = this
      let card_target = this.$refs.imageDom // 需要截图的dom
      domtoimage.toSvg(card_target).then(function(imgUrlBase64) {
        var img = document.createElement('img')
        img.setAttribute('src', imgUrlBase64)
        const devicePixelRatio = window.devicePixelRatio
        img.onload = function() {
          var canvas = document.createElement('canvas')
          var content = canvas.getContext('2d')
          canvas.width = img.width * devicePixelRatio
          canvas.height = img.height * devicePixelRatio
          content.drawImage(
            img,
            0,
            0,
            img.width * devicePixelRatio,
            img.height * devicePixelRatio
          )
          content.mozImageSmoothingEnabled = false
          content.webkitImageSmoothingEnabled = false
          content.msImageSmoothingEnabled = false
          var canvasData = canvas.toDataURL('image/png')
          var blob = that.base64ToFile(canvasData)
          // console.log(blob) 
          // blob为所需的file
        }
      })
    }

shareIos() {
      const that = this
      const shareContent = document.getElementById('downloadCardDiv') // 需要截图的包裹的（原生的）DOM 对象
      
      this.$nextTick(() => {
        const opts = {
          logging: false, //日志开关，便于查看html2canvas的内部执行流程

          width: shareContent.clientWidth, //dom 原始宽度

          height: shareContent.clientHeight,

          scrollY: 0,

          scrollX: 0,

          scale: window.devicePixelRatio,

          useCORS: true
        }
        html2canvas(shareContent, opts).then(canvas => {
          // 转成图片，生成图片地址
          const imgUrlBase64 = canvas.toDataURL('image/png') //可将 canvas 转为 base64 格式
          var blob = that.base64ToFile(imgUrlBase64)
          // console.log(blob)
          // blob为所需file
        })
      })
    },