h5 分享海报 , H5+AAP 分享海报

分享海报在浏览器中显示，安卓可以正常显示。苹果手机海报上面有一段空白，感觉图片好像有一个margin-top:50px。

改之后代码

1.template中内容

<img class="avatar_pic" :src="dataImg" @load="imgLoad" @click="sevenss" alt/>
    <div class="qrcodeposter_wrap" style="position: fixed; top: -999px;  405px; height: 720px;" id="canvasPosterActual">
      <div class="title" style="top: 49px; font-size: 24px; line-height: 24px;font-weight: 600;"> {{ posterContent }}</div>
      <div class="code" style="top: 313px; font-size: 18px; font-family: Alibaba-PuHuiTi-Medium,serif"> 邀请码：{{ userInfo.inviteCode }}</div>
      <img class="avatar_pic" :src="avatarImg" @load="imgLoad" alt/>
      <img :src="QCode()" class="codeImg" style="top: 400px" width="50%" height="25%"/>
    </div>

2.引入插件

import QRCode from 'qrcode' // 邀请链接生成二维码
import html2canvas from 'html2canvas'  //canvas组件

3.data中内容

data () {
    return {
      avatarImg: require('../../assets/img/poster.png'),
      dataImg: '', //生成的 base64 图片
      urlPre: document.location.origin + '/#/register?code=',
      userInfo: {},
      isIOS: false,
      maxWidth: '50px',
      urlCode: ''
    }
  },

4.创建海报最开始canvas 创建的图片很模糊，后面加上dpi就清晰了很多。 dpi是清晰度，数值越大图片越清晰

createPoster () {
      const poster = document.getElementById('canvasPosterActual')
      html2canvas(poster, {
        dpi: 1000, // 清晰度
        backgroundColor: '#fff',
        useCORS: true,
        scale: 2,
        async: true

      }).then((canvas) => {
        this.dataImg = canvas.toDataURL('image/j
      })
    },
    imgLoad () {
      // img @load事件在图片加载完成后立即执行
      this.createPoster()
    },

5.链接生成二维码

 // wx 二维码
    QCode () {
      let dpr = window.devicePixelRatio
      let w = 0
      try {
        w = document.getElementById('canvasPosterActual').offsetWidth
      } catch (e) {
        console.log(e)
        w = window.innerWidth - 50
      }
      let windowWidth = window.innerWidth - 200
      let maxWidth = windowWidth
      if (w * dpr < windowWidth) {
        maxWidth = w * dpr
      }
      this.maxWidth = maxWidth
      let urlCode = ''
      QRCode.toDataURL(this.urlPre + this.userInfo.inviteCode, {
         maxWidth,
        height: maxWidth,
        margin: 1
      }, (err, url) => {
        urlCode = url
        if (err) console.log({ 'err': err })
      })
      return urlCode
    }

5.保存图片，h5中手机浏览器是长按保存图片这里是APP里点击保存图片

sevenss () {
      /* eslint-disable */
      //app 保存图片  浏览器中可以长按保存图片
      if(window.plus){ //检查是否是APP环境
        let base64 = this.dataImg	 // base64 图片
        // 保存到本地
        const bitmap = new plus.nativeObj.Bitmap('test')

        bitmap.loadBase64Data(base64, function () {
          const url = '_doc/' + new Date().getTime() + '.png' // url为时间戳命名方式
          bitmap.save(url, {
            overwrite: true // 是否覆盖
            // quality: 'quality'  // 图片清晰度
          }, (i) => {
            plus.gallery.save(i.target, function (d) {
              // 销毁Bitmap图片
              bitmap.clear()
              alert('保存图片成功')
            }, function (e) {
              // 销毁Bitmap图片
              bitmap.clear()
              alert('保存到系统相册失败,请尝试重新保存或截图保存')
            })
          }, function () { alert('保存失败,请尝试重新保存或截图保存') })
        })
      }
      /* eslint-disable */
    },