微信小程序使用canvas绘制分享海报

chabc1999

已于 2022-04-28 10:43:01 修改

阅读量1.8k

点赞数 1

分类专栏： JavaScript web前端文章标签：微信小程序 vue.js 前端

于 2022-02-25 17:04:43 首次发布

本文链接：https://blog.csdn.net/chabc1999/article/details/123135616

版权

本文介绍如何在微信小程序中使用canvas进行分享海报的绘制。首先讲述了项目的准备工作，包括确定海报元素和选择二维码生成组件。然后详细讲解了海报生成的过程，并最终讨论了如何保存生成的图片。

摘要由CSDN通过智能技术生成

一、准备工作

最近在做的一个vue项目中，需要做一个分享海报，头秃！！！
首先确定海报那些地方是随机变动的、海报背景、引用二维码生成组件（目前市场上有很多生成二维码的组件，这个项目用的是uqrcode）注意小程序中分享二维码需要现在小程序后台开发设置中配好，不然链接进不去对应小程序中。

 //判断昵称信息是否是中文
      isChinese(size) {
        var re = /[^\u4E00-\u9FA5]/;
        let chartLength=0;
        for(let i=0;i<this.userInfo.name.length;i++){
          if (re.test(this.userInfo.name[i])) {
            chartLength=chartLength+size / 2;
          } else {
            chartLength=chartLength+size;
          }
        }
        return chartLength
      },
      //获取图片本地信息
      getImage(url, type) {
        let that = this
        return new Promise(function(resolve, reject) {
          uni.getImageInfo({
            src: url,
            success: (res) => {
              that.shareObj[type] = res.path
              resolve()
            }
          })
        })
      },
      //获取设备信息
      getSys() {
        let that = this;
        return new Promise(function(resolve, reject) {
          //获取系统信息
          wx.getSystemInfo({
            success: function(res) {
              resolve(res.windowWidth / 750)
            }
          })
        })
      },
      //生成二维码
      async qrcode() {
        await this.$refs.uqrcode.make({
          mode: 'canvas', // 默认为view
          // size: 40, //尺寸 以px为单位
          // text: '*****', //测试网址内容如：https://www.baidu.com 必须在微信公众平台上配置好，不然扫码打开的为404网页
        }).then(res => {
          // 返回的res与uni.canvasToTempFilePath返回一致
          this.shareObj.codeUrl = res.tempFilePath
        })
      },

开始生成海报

 let that = this;
        var company = 1

        wx.showLoading({
   
          title: '生成海报中...'
        })
        //获取设备信息
        company = await that.getSys()
        //获取头像等图片信息
        await that.getImage(that.userInfo.avatar, 'avatarUrl')
        //由于小程序限制2M以内，不能放置较大的背景图片在本地，并且ctx.drawImage中的url必须是本地url,所以使用线上图片需要获取图片本地信息。
        await that.getImage('https://cdn.vchen.cc/applets/guide/share-bcg.png', 'bcgUrl') 
//生成二维码，必须等待这些工作完成才能开始创建海报、不然会报错
        await that.qrcode()
        //创建canvas实例对象
        const ctx = wx.createCanvasContext('shareCanvas', that)
       //定义头像、二维码变量
        let avartarObj = {
   
            wid: 188 * company,
            hei: 188 * company,
            x: 237 * company,
            y: 177 * company,
          },
          codeObj = {
   
            wid: 114 * company,
            hei: 114 * company,
            x: 274 * company,
            y: 779 * company,
          },
          //计算昵称长度
          nameLength = (669 - that.isChinese(42) - 3 * 42) / 2
          //绘制海报背景
          ctx.drawImage(that.shareObj.bcgUrl, 0, 0, 669 * company, 975 * company);
         //绘制海报中固定的图片
          ctx.drawImage('/static/login/share-te