uniapp中使用canvas实现二维码分享海报

案例1

实现背景：

• 海报的尺寸根据图片大小来的，宽度百分百，高度同比例缩放，图上覆盖二维码
• 如果没有设置海报图片，使用别的图片，在底部添加一个底部的固定图片，和二维码，和图片的左上角覆盖log图
  难点:
• 因为是使用canvas渲染的图片，但是图片的尺寸不是固定，也就是canvas的尺寸不是固定（解决：在外部先获取图片的尺寸，传进这个组件中）
• h5是渲染正常的，微信小程序图片渲染不出来（解决：微信不支持canvas直接渲染网络图片,所以需要先缓存到本地）

<template>
  <view class="poster-box" ref="posterBox" @click="hidePoster">
    <canvas
      :style="{
        width: posterOptions.poster.canvasWidth + 'px',
        height: posterOptions.poster.canvasHeight + 'px',
      }"
      canvas-id="myCanvas"
    ></canvas>
    <!-- #ifdef MP  -->
    <image
      :src="base64"
      class="poster-image"
      :draggable="false"
      show-menu-by-longpress="true"
    ></image>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <image class="poster-image" :src="base64" :draggable="false"></image>
    <!-- #endif -->
  </view>
</template>

<script>
import Qr from '@/utils/wxqrcode'
export default {
  name: 'poster_canvas',
  data() {
    return {
      base64: '', // 海报绘制成图片以便保存
    }
  },
  props: {
    //图片地址
    posterOptions: {
      type: Object,
      require: true,
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.imgToCanvas()
    })
  },
  methods: {
    async imgToCanvas() {
      let that = this
      
      let canvasHeight = this.posterOptions.isHavePosterImg
        ? this.posterOptions.poster.canvasHeight
        : this.posterOptions.poster.canvasHeight -
          this.posterOptions.buttonOption.h
      // 渲染大图
      let ctx = uni.createCanvasContext('myCanvas', that)
      console.log(11111,this.posterOptions)
      ctx.drawImage(
        this.posterOptions.poster.url,
        0,
        0,
        this.posterOptions.poster.canvasWidth,
        canvasHeight
      )
      if (!this.posterOptions.isHavePosterImg) {
        //渲染底部的图片
        ctx.drawImage(
          this.posterOptions.buttonOption.bottomUrl,
          this.posterOptions.buttonOption.x,
          this.posterOptions.buttonOption.y,
          this.posterOptions.buttonOption.w,
          this.posterOptions.buttonOption.h
        )
      }

      // 渲染二维码
      if (this.posterOptions.QrOption.isWeChatMiniApp) {
        ctx.drawImage(
          this.posterOptions.QrOption.QrUrl,
          this.posterOptions.QrOption.x,
          this.posterOptions.QrOption.y,
          this.posterOptions.QrOption.w,
          this.posterOptions.QrOption.h
        )
      } else {
        //普通二维码
        let qrCodeImg = Qr.createQrCodeImg(this.posterOptions.QrOption.QrUrl, {
          size: parseInt(300),
        })
        ctx.drawImage(
          qrCodeImg,
          this.posterOptions.QrOption.x,
          this.posterOptions.QrOption.y,
          this.posterOptions.QrOption.w,
          this.posterOptions.QrOption.h
        )
      }
      if (!this.posterOptions.isHavePosterImg) {
        // 渲染log 和文字
        ctx.drawImage(
          this.posterOptions.logOption.logUrl,
          this.posterOptions.logOption.x,
          this.posterOptions.logOption.y,
          this.posterOptions.logOption.w,
          this.posterOptions.logOption.h
        )
        ctx.fillStyle = this.posterOptions.textOption.color
        ctx.setFontSize(22)
        ctx.font = 'bold arial'
        ctx.fillText(
          this.posterOptions.textOption.text,
          this.posterOptions.textOption.x,
          this.posterOptions.textOption.y
        )
      }

      ctx.save() //保存
      ctx.draw() //绘制
      // 不加延迟的话，base64有时候会赋予undefined
      // 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
      setTimeout(() => {
        uni.canvasToTempFilePath(
          {
            canvasId: "myCanvas",
            fileType: "jpg",
            width:that.posterOptions.poster.canvasWidth,
            height:that.posterOptions.poster.canvasHeight,
            destWidth:that.posterOptions.poster.canvasWidth,
            destHeight:that.posterOptions.poster.canvasHeight,
            success: function (res) {
              that.base64 = res.tempFilePath;
            },
            fail: function (error) {
              console.log(error, "错误");
            },
          },that
        );
      }, 500);
    },
    hidePoster() {
      // #ifdef H5
      this.$parent.$parent.hidePoster()
      // #endif
      // #ifndef H5
      this.$parent.hidePoster()
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
.poster-box {
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  opacity: 0;
}

</style>

使用

<template>
  <view
    class="contentBgc"
    :style="{ backgroundColor: detailObj.backgroundColor || defaultBgc }"
  >
    <image
      class="width-100"
      :src="detailObj.activityDetailHeadImg"
      mode="widthFix"
    />
    <view v-for="item in detailObj.plateDtoList" :key="item.id">
      <TopicThree v-if="detailObj.currentTemplate == 3" :itemObj="item" />
      <TopicTwo v-if="detailObj.currentTemplate == 2" :itemObj="item" />
      <TopicOne v-if="detailObj.currentTemplate == 1" :itemObj="item" />
    </view>
    <generateaposter v-if="isGetOk" @pChangeType="showPoster" />
    <SharePoster v-if="posterShow" :posterOptions="posterOptions"></SharePoster>
  </view>
</template>

<script>
import TopicOne from './components/topicOne.vue'
import TopicTwo from './components/topicTwo.vue'
import TopicThree from './components/topicThree.vue'
import { getSpecialTopicData } from '@/api/specialTopic.js'
// #ifdef H5
import { getShopWxConfig, share } from '@/utils/wxShare.js'
// #endif
import mixinWxshare from '@/utils/wxShareTimeline.js' //微信分享朋友圈
import generateaposter from '@/components/gpage/generateaposter.vue'
import SharePoster from './components/sharePoster.vue'
import { cmsWxacodeGetwxacode } from '@/api/product'
export default {
  mixins: [mixinWxshare],
  components: {
    TopicOne,
    TopicTwo,
    TopicThree,
    generateaposter,
    SharePoster,
  },
  onLoad(options) {
    this.activityUniqueCode = options.activityUniqueCode
    this.initData()
  },
  data() {
    return {
      defaultBgc: '#fff', //默认背景色
      share: this.$utils.getImgUrl('/static/mcShopImage/share.png'), //分享
      detailObj: {},
      activityUniqueCode: '',
      posterShow: false,
      isGetOk: false,
      posterOptions: {
        isHavePosterImg: false, //用户是否上传了分享海报的图片
        activityName: '',
        textOption: {
          text: '',
          x: 0, // X轴坐标
          y: 20, // Y轴坐标
          color: '#9c6d06',
        },
        poster: {
          url:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F0429f29e-85f3-5826-9608-946fc1ee103a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664356680&t=349aa739d52cd748c50b3afd89da2ba2',
          canvasWidth: 0,
          canvasHeight: 0,
        },
        QrOption: {
          QrUrl: '', // 二维码链接
          x: 20, // 图片X轴坐标
          y: 20, // 图片Y轴坐标
          w: 90, // 图片宽度
          h: 90, // 图片高度
          isWeChatMiniApp: false, // 是否是微信小程序二维码 true是微信小程序, false 不是微信小程序
        },
        logOption: {
          //log
          logUrl:
            'https://jemsfile.mochouu.com/provider/91949676/20220831/1661926456418.png',
          x: 15, // 图片X轴坐标
          y: 15, // 图片Y轴坐标
          w: 120, // 图片宽度
          h: 45, // 图片高度
        },
        buttonOption: {
          //底部的图片
          bottomUrl:
            'https://jemsfile.mochouu.com/provider/91949676/20220831/1661930915954.png',
          x: 0, // 图片X轴坐标
          y: 20, // 图片Y轴坐标
          w: 100, // 图片宽度
          h: 100, // 图片高度
        },
      },
      screenWidth: 0,
    }
  },
  mounted() {},
  // #ifndef H5
  /* 微信小程序分享 */
  onShareAppMessage: function(res) {
    // console.log('分享的userCode:'+this.userInfo.userCode)
    let userInfo = this.$utils.getStorageSync('userInfo')
    let routes = getCurrentPages() // 获取当前打开过的页面路由数组
    let curParam =
      routes[routes.length - 1].options ||
      routes[routes.length - 1].$route.query //获取路由参数
    if (userInfo) {
      curParam.userCode = userInfo.userCode
    }
    let a = this.$utils.pageliks(curParam, routes)
    let obj = {
      title: this.detailObj.shareTitle || this.detailObj.shareContent || '',
      desc:this.detailObj.shareContent||'',
      path: a,
      imageUrl: this.detailObj.shareImg || this.detailObj.verticalImgUrl || '',
    }
    return obj
  },
  // #endif
  methods: {
    hidePoster() {
      this.posterShow = false
    },
    getWxCode() {
      uni.showLoading({
        title: '加载中',
      })
      let that = this
      this.isGetOk = false
      let routes = getCurrentPages() // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].route //获取当前页面路由
      let curParam = routes[routes.length - 1].options //获取路由参数
      let obj = {}
      obj.curRoute = curRoute
      obj.curParam = curParam
      // 拼接参数
      let str = ''
      for (let key in obj.curParam) {
        str += '&' + key + '=' + obj.curParam[key]
      }
      str = str ? '?' + str.substr(1, str.length) : ''
      let data = {
        page: '/' + obj.curRoute + str,
      }
      cmsWxacodeGetwxacode(data).then((res) => {
        uni.hideLoading()
        if (res.code === 1000) {
          this.downImg(res.data, that.posterOptions.QrOption, 'QrUrl')
          that.$set(that.posterOptions.QrOption, 'isWeChatMiniApp', true)
          that.isGetOk = true
        }
      })
    },
    // 显示分享海报
    showPoster() {
      this.posterShow = true
    },
    /* 任务分配 */
    assignTasks(data) {
      /* 设置头部的title */
      uni.setNavigationBarTitle({
        title: data.activityName,
      })
      // 初始化分享朋友圈
      // #ifndef H5
      this.initWxShareData(
        this.detailObj.shareTitle || this.detailObj.shareContent,
        this.detailObj.shareImg || this.detailObj.verticalImgUrl
      )
      // #endif
      // #ifdef H5
      switch (uni.getSystemInfoSync().platform) {
        case 'android':
          this.fx(1)
          break
        case 'ios':
          this.fx(2)
          break
      }
      // #endif
    },
    /* 初始化数据 */
    initData() {
      let that = this
      getSpecialTopicData(this.activityUniqueCode).then((res) => {
        if (res.code == 1000) {
          const { plateDtoList, ...rest } = res.data
          let filterData = plateDtoList.map((it) => {
            const { productJson, ...re } = it
            let objArr = JSON.parse(productJson)
            return {
              productJson: objArr||[],
              ...re,
            }
          })
          this.detailObj = { plateDtoList: filterData, ...rest }
          this.assignTasks(this.detailObj)

          // #ifdef MP
          uni.getSystemInfo({
            success: (res) => {
              that.screenWidth = res.windowWidth
            },
          })

          this.getWxCode()
          // #endif
          // #ifdef H5
          that.screenWidth = document.documentElement.clientWidth
          this.posterOptions.QrOption.QrUrl = window.location.href
          this.isGetOk = true
          // #endif
          // 判断是否设置了分享海报的图片
          let isHaveImg = this.detailObj.posterImg ? true : false
          if(!isHaveImg){
            this.downImg(that.posterOptions.logOption.logUrl, that.posterOptions.logOption, 'logUrl')
            this.downImg(that.posterOptions.buttonOption.bottomUrl, that.posterOptions.buttonOption, 'bottomUrl')
          }
          this.$set(this.posterOptions, 'isHavePosterImg', isHaveImg)
          this.$set(
            this.posterOptions.textOption,
            'text',
            this.detailObj.activityName
          )
          // 设置img图片和canvas大小
          let posterImg = this.detailObj.posterImg
            ? this.detailObj.posterImg
            : this.detailObj.activityDetailHeadImg

          // 设置大图的url
          this.downImg(posterImg, this.posterOptions.poster, 'url')

          uni.getImageInfo({
            src: posterImg,
            success(res) {
              let imgW = res.width //图片宽度
              let imgH = res.height //图片高度
              let per = imgW / that.screenWidth
              that.$set(
                that.posterOptions.poster,
                'canvasWidth',
                that.screenWidth
              )
              // 是否设置分享海报
              let canvasHeight = isHaveImg
                ? imgH / per
                : imgH / per + that.posterOptions.buttonOption.h
              that.$set(that.posterOptions.poster, 'canvasHeight', canvasHeight)
              // 设置二维码位置
              let codeX = isHaveImg ? that.screenWidth - 95 : 5
              that.$set(that.posterOptions.QrOption, 'x', codeX)
              let codeY = isHaveImg ? imgH / per - 95 : canvasHeight - 95
              that.$set(that.posterOptions.QrOption, 'y', codeY)
              if (!isHaveImg) {
                // 如果没有设置分享海报
                that.$set(
                  that.posterOptions.buttonOption,
                  'w',
                  that.screenWidth
                )
                that.$set(that.posterOptions.buttonOption, 'y', imgH / per)
                that.$set(that.posterOptions.textOption, 'x', codeX + 120)
                that.$set(that.posterOptions.textOption, 'y', codeY + 40)
              }
            },
          })
        }
      })
    },
    // 将网络图片缓存到本地
    downImg(img, obj, name) {
      let that = this
      uni.downloadFile({
        url: img,
        success: (res) => {
          that.$set(obj, name, res.tempFilePath)
        },
      })
    },
    // 分享方法
    fx(val) {
      let url = window.location.href
      // 获取usercode
      let urls
      let userInfo = this.$utils.getStorageSync('userInfo')
      let routes = getCurrentPages() // 获取当前打开过的页面路由数组
      let curParam =
        routes[routes.length - 1].options ||
        routes[routes.length - 1].$route.query //获取路由参数
      if (userInfo) {
        curParam.userCode = userInfo.userCode
      }
      let a = this.$utils.pageliks(curParam, routes)
      let b = window.location.origin
      if (userInfo) {
        urls = `${b}${a}`
      } else {
        urls = url
      }
      let data = {
        url: url,
      }
      let shares = {
        title: this.detailObj.shareTitle || this.$config.serviceProvider,
        link: urls,
        desc:this.detailObj.shareContent||'',
        imgUrl: this.detailObj.shareImg || '',
      }
      if (val == 1) {
        getShopWxConfig(data, shares, val)
      } else {
        share(shares)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.width-100 {
  width: 100%;
}
.contentBgc {
  min-height: 100vh;
  width: 100vw;
  padding-bottom: 20rpx;
}
</style>