vue-cli（微信公众号）中网页转成canvas并保存为图进行长按分享

先上效果图：

图1 点击按钮生成图2 （个人分享海报分享，点击分享弹框显示）

图3 点击按钮生成图4 （商品详情分享，点击分享替换掉页面内容）

所需依赖包：qrcodejs2 html2canvas  (具体引入方式请自行点击查看，不做描述)  html2canvas 文档

 

下面直接上代码（针对图1 2）：

HTML: 简单布局：左上角用户信息，右下角通过qrcode生成分享二维码。大的背景图使用的img定位实现。（最开始使用的是背景图，但是生成的海报图比较模糊，且按照网上的方法并没有解决掉，于是更换了img标签）

<template>
  <div>
    <div class="root" id="codeImg" :style="'width:'+ htmlW +'px;height:'+htmlW*1.777 +'px;'">
      <!-- background-image: url('+BackgroundMap+'); -->
      <img class="backMap" :src="BackgroundMap" alt>
      <!-- 推广码 -->
      <div class="user-info">
        <img :src="userImg" alt>
        <p>
          <span>{{userInfo.NickName}}</span>
          <br>
          <span>我为xxxx代言</span>
        </p>
      </div>
      <div class="qrcode">
        <div id="qrcode" style="text-align:center"></div>
        <div>长按此二维码
          <br>注册成为xxxx会员
        </div>
      </div>
      <div id="canvas"></div>
      <canvas id="aaa"></canvas>
      <mt-popup v-model="popupShare" class="popup-share share-code">
        <div class="share">
          <div class="share-img"></div>
          <!-- <div class="footer" @click="downImg()">长按进行分享操作 </div> -->
        </div>
      </mt-popup>
    </div>
    <!-- 分享 -->
    <div class="share-icon" @click="openShare()">
      <img src="../../../../../static/images/share.png" alt>
    </div>
  </div>
</template>

Javascript: 核心代码：

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

// 生成二维码
qrcode (qn) {
      /* eslint-disable no-new */
      new QRCode('qrcode', {
        width: 85,
        height: 85,
        text: qn
      })
    },
this.qrcode('xxxxxx')


// 点击生成海报
this.downImg ()
downImg () {
      var _this = this
      var canvas2 = document.createElement('canvas')
      let _canvas = document.querySelector('.root')
      var w = parseInt(window.getComputedStyle(_canvas).width)
      var h = parseInt(window.getComputedStyle(_canvas).height)
      // 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
      canvas2.width = w * 2
      canvas2.height = h * 2
      canvas2.style.width = w + 'px'
      canvas2.style.height = h + 'px'
      // 可以按照自己的需求，对context的参数修改,translate指的是偏移量
      //  var context = canvas.getContext("2d");
      //  context.translate(0,0);
      var context = canvas2.getContext('2d')
      context.scale(2, 2)
      let opts = {
        scale: 2,
        allowTaint: true,
        canvas: canvas2,
        logging: true,
        imageTimeout: 0,
        // width: w, // dom 原始宽度
        // height: h,
        dpi: window.devicePixelRatio * 960
      }
      html2canvas(document.querySelector('.root'), opts).then(function (canvas) {
        document.querySelector('.share-img').innerHTML =
          '<div class="qrimg"><p style="font-size:0.32rem;color:#808080;line-height:1.173rem">长按上图进行分享操作</p></div>'
        // 在p标签前面插入图片insertBefore(new,item[0]) 在父元素最后插入appendChild(new)
        document
          .querySelector('.qrimg')
          .insertBefore(
            _this.convertCanvasToImage(canvas),
            document.querySelector('.share-img p')
          )
        document.querySelector('.share-img img').style.width = '100%'
      })
    },
// 从 canvas 提取图片 image
    convertCanvasToImage (canvas) {
      var image = new Image()
      image.src = canvas.toDataURL('image/png')
      return image
    },
// 将图片转base64  后台接口
    ExchangeImage (index, url) {
      this.$http
        .get('/api/APP_Home/ExchangeImage', { image: url })
        .then(res => {
          if (index === 1) {
            this.userImg = res.Result
          } else if (index === 2) {
            this.BackgroundMap = res.Result
          }
        })
    },

Style: (使用了scss)

.root {
  width: 100%;
  // background-image: url("/static/images/code_bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  .backMap {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .user-info {
    padding: 0.5rem;
    position: absolute;
    top: 0;
    width: 100%;
    img {
      width: 1.333rem;
      height: 1.333rem;
      float: left;
      margin-right: 0.265rem;
    }

    p {
      color: #262626;
      font-size: 0.32rem;
      line-height: 0.6665rem;
      font-family: "楷体";
      font-weight: 600;
    }
  }

  .qrcode {
    position: absolute;
    bottom: 0.4rem;
    right: 0.265rem;
    margin-top: 0.5rem;

    div {
      text-align: center;
      color: #fff;
      font-family: "楷体";
      font-size: 0.32rem;
    }
  }

  .popup-share {
    width: 80%;
    // height: 14rem;
    padding: 0.265rem 0.265rem 0;

    .share {
      height: 100%;
      width: 100%;
      text-align: center;
      position: relative;
      img {
        width: 100%;
      }
    }
  }
}

 

bug:

       1、最开始做的时候所有的图片都是从static文件夹下直接引入的，点击分享生成的海报图仅仅是模糊的问题。但是和后台对接接口的时候图片需要更换为网路地址。导致生成海报的时候只要是网络图片都直接报跨域错误。经过一番倒腾发现需要设置useCORS参数为true，但是我添加修改之后并没有效果。查看过dom标签之后发现，所有跨域的图片都是因为使用的网络地址，而本地引入的图片渲染时路径修改为base64图片路径。最终让后台新增了一个网络图片转base64的接口 ExchangeImage() 讲所有的网络地址在渲染页面的时候使用base64。这样就解决了问题

       2、该bug是图3 4出现的。（该问题欢迎讨论）最初的商品分享效果是在商品详情页点击分享按钮直接通过popup弹框显示所需要分享的信息，然后点击分享生成海报图。开发中没有什么问题，后来上线测试的时候发现在微信开发工具中以及大部分安卓手机中点击分享的时候最终生成的海报图的内容统一会向右侧移动一个不固定的位置。经过测试发现是通过html2canvas将网页生成canvas的时候canvas的内容右移了。使用translate(x,y)进行偏移修改没有效果。（目前没有解决掉，欢迎路过的赐教！）考虑到可能是html2canvasJS版本的问题，于是单独引入了0.5版本的代码。结果使用translate（）后安卓手机果然可以进行解决左右偏移的问题，但是出现了上下偏移，并且ios手机上也出现了不确定的偏移问题。/手动无奈/。

       经过一盘折腾想到可能是因为popup弹框的冲突问题吧（其实图1也是点击后弹出popup，然后渲染海报图），最终按照图1的思路将页面修改，点击商品详情页的分享跳转图3 点击图3的按钮生成图4讲图3的内容替换为分享海报