微信小程序base64实现小程序码

大家好，今天在做小程序时有一个推广的小程序二维码，下面我们来看看是如何制作的。

这个base64码是后台接口获取到的，所以要先将数据获取到，获取到数据后有些朋友不知道该怎么用到方法里，在方法内部获取不到base64码。

代码如下：

wxml

<canvas type="2d" id="myCanvas" style="width: 100%;height: 100vh;border-radius: 5px;" bindlongtap="save"></canvas>

js

Page({
  data: {
    code: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    let userid = getApp().globalData.userid;
    
  },

  onReady() {
    let base=this.data
    console.log(base);
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr     // 获取宽
        canvas.height = res[0].height * dpr  // 获取高
        ctx.scale(dpr, dpr)
        wx.request({
          url: ',  //这里是你的接口
          data: {
            
          },
          method: 'POST',
          success: res=> {
            console.log(res);
           var code = res.data;
           let image = canvas.createImage();//创建iamge实例
        image.src = 'https://pic.imgdb.cn/item/63be1365be43e0d30e0e8540.jpg';  // 引入图片
        image.onload = function () {
          ctx.drawImage(image, 0, 0, 375, 610); // 背景图
 
          // 绘制base64图片
          //声明文件系统
          const fs = wx.getFileSystemManager();
          var times = new Date().getTime();
          var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
          //将base64图片写入
          fs.writeFile({
            filePath: codeimg,
            data: code.slice(22),  // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
            encoding: 'base64',
            success: () => {
              console.log(codeimg);
              wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
                .exec((res) => {
                  let ctx = res[0].node.getContext('2d');//getContext返回Canvas 的绘图上下文
                  let canvas = res[0].node;
                  const bg = canvas.createImage();
                  bg.src = codeimg;
                  bg.onload = function () {
                    ctx.drawImage(bg, 85, 300, 210, 210);
                  }
                })
            }
          });
 
        }
          }
        });
        
        // 到这里就可以直接绘制
         
      })
  },
});

以上就是本章的全部内容了，感谢您的阅读，