微信小程序显示二维码?

wxml

 <canvas style="width: 100%;height: 100%;margin-left: 20%;" id="Canvase" type="2d"></canvas>

js

// pages/code/code.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    code: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that = this
      wx.request({
        url: '接口数据', //仅为示例,并非真实的接口地址
        data: {
          userid: 36,
          scienceid: 1,
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          console.log(res);

          const fs = wx.getFileSystemManager();
          var codeimg = wx.env.USER_DATA_PATH + '/' + '.jpg';
          fs.writeFile({
            filePath: codeimg,
            data: res.data.slice(22), // code就是接口返回的base64数据(分割掉前面的data:image/png;base64,)
            encoding: 'base64',
            success: () => {
              // console.log(codeimg);
              wx.createSelectorQuery().select('#Canvase').fields({
                  node: true,
                  size: true
                })
                .exec((res) => {
                  console.log(res);
                  let ctx = res[0].node.getContext('2d'); //getContext返回Canvas 的绘图上下文              
                  let canvas = res[0].node;
                  const bg = canvas.createImage();
                  //背景图片
                  const image = canvas.createImage();
                  // 图片高清化
                  const dpr = wx.getSystemInfoSync().pixelRatio;
                  res[0].node.width = res[0].node.width * dpr;
                  res[0].node.height = res[0].node.height * dpr;
                  // 设置背景图片src
                  image.src = 'https://pic.imgdb.cn/item/647d31011ddac507cc160e75.jpg'
                  bg.src = codeimg;
                  image.onload = function () {
                    ctx.drawImage(image, 0, 0, 289, 370)
                    ctx.drawImage(bg, 76, 175, 140, 140);

                  }
                  // 将图片保存需要的实例,不写保存可以不需要
                  that.setData({
                    ctx: canvas
                  })  
                })



            }
          })

        }
      })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

相关推荐

  1. 程序显示

    2023-12-06 15:22:04       60 阅读
  2. 程序保存的过程

    2023-12-06 15:22:04       65 阅读
  3. 程序和支付宝程序生成

    2023-12-06 15:22:04       28 阅读
  4. 程序生成海报并分享

    2023-12-06 15:22:04       60 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-06 15:22:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-06 15:22:04       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-06 15:22:04       87 阅读
  4. Python语言-面向对象

    2023-12-06 15:22:04       96 阅读

热门阅读

  1. pytorch 多卡并行训练

    2023-12-06 15:22:04       60 阅读
  2. Numpy实践_排序和搜索和计数

    2023-12-06 15:22:04       48 阅读
  3. centos用什么命令可查看版本号

    2023-12-06 15:22:04       60 阅读
  4. restful风格在springmvc中的例子和简介

    2023-12-06 15:22:04       61 阅读
  5. C/c++源代码qt软件 svn版本管理开发如何防泄密?

    2023-12-06 15:22:04       53 阅读
  6. Apache HTTP 安装和配置下载

    2023-12-06 15:22:04       58 阅读
  7. OracleRac跨网段修改Public IP/VIP/Private IP/Scan IP

    2023-12-06 15:22:04       54 阅读
  8. 【WPF】隐藏一个XAML的view视图

    2023-12-06 15:22:04       53 阅读
  9. HTML-1

    2023-12-06 15:22:04       58 阅读