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

Posted stoolive1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端h5截图与原生iosandroid的兼容交互相关的知识,希望对你有一定的参考价值。

 

项目场景:

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
        )
      )
    ,

 

以上是关于移动端h5截图与原生iosandroid的兼容交互的主要内容,如果未能解决你的问题,请参考以下文章

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

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

移动端h5与原生交互JSBridge初体验

android与h5交互原理,h5与原生 app 交互的原理

移动端h5网页遇到一个兼容性bug,我添加长按事件在苹果会弹出个放大镜,会把我自己加的长按事件挤掉

移动端与H5页面像素的差异与关系