微信小程序学习：生成带小程序码的海报。

最新推荐文章于 2023-03-18 21:30:00 发布

sziitjin

最新推荐文章于 2023-03-18 21:30:00 发布

阅读量1.3k

点赞数 2

分类专栏：微信小程序文章标签：小程序 canvas

本文链接：https://blog.csdn.net/sziitjin/article/details/108365596

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

还不了解canvas的可以先查看小程序api:

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

一、布局（基础学习）

1、在布局文件wxml创建canvas

<view><canvas style="width:750px;height: 1128px;background:#f1f1f1;" canvas-id="qrcCanvas"/></view>

2、在JS文件获取canvas的Context

const ctx = wx.createCanvasContext('qrcCanvas')

3、简单的绘制

1.绘制矩形

ctx.fillRect(x, y, width,height)；

参数依次是 矩形x坐标、y坐标、图片宽、高

2.绘制图片

ctx.drawImage(src, x, y,width,height)

参数依次是图片地址、x坐标、y坐标、图片宽、高

3.绘制文字

ctx.fillText(text, x, y, maxWidth)

参数依次是文本内容、x坐标、y坐标、需要绘制的最大宽度

获取小程序码小程序api:

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html

二、生成带小程序码的海报。

1、小程序码的获取一般是放在后台去做，前端思路：

1）通过接口向服务端获取海报背景图片和小程序码；

调用接口获取到海报背景图片和小程序码对应的图片连接，然后通过wx.getImageInfo获取图片连接对应的本地路径。

    wx.getImageInfo({
      src: that.data.posterURL,//服务器返回的图片地址
      success: function (res) {
        
        let qrCodePath = res.path;
        
      },
      fail: function (res) {
      },
      complete: function(res){
        wx.hideLoading()
      }
    });

2）将获取到的两张图片合并成一张海报；

          //画布上下文本
          const ctx = wx.createCanvasContext('qrcCanvas')
          // 绘制底图
          ctx.drawImage(bgPath ,0, 0, 750, 1128)
          // 绘制小程序码
          var qrImgSize = 150, iMoveY = 828;
          ctx.drawImage(qrCodePath, (750 - qrImgSize) / 2, iMoveY, qrImgSize, qrImgSize)
          ctx.stroke()
          ctx.draw()

3）保存海报到手机本地。

wx.canvasToTempFilePath({
      //通过id 指定是哪个canvas
      canvasId: that.data.canvasId,
      success(res) {
        //成功之后保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (res) {
            console.log(res)
            if (res.errMsg =="saveImageToPhotosAlbum:fail auth deny"||res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
              console.log("打开设置窗口");
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                    console.log("获取权限成功，再次点击图片保存到相册")
                    //关闭海报显示框
                    that.setData({
                      posterIsShow: false
                    })
                  } else {
                    console.log("获取权限失败")
                  }
                },
                fail: function(res) {
                  console.log(res)
                }
              })
            }
          }
        })
      },
      complete: function() {
        wx.hideToast();
      }
    })

最终效果：