小程序生成二维码图片保存到系统相册(怎么把小程序生成二维码图片)

先看下创建出的最终效果

小程序生成二维码图片保存到系统相册(怎么把小程序生成二维码图片)

1、在wxml 创建画布

<canvas canvas-id="shareCanvas" style="width:250px;height:400px;background:#fff;margin:auto">
</canvas>

 

2、在js文件中向画布添加内容

  createPhoto: function() {
    var that = this;
    const ctx = wx.createCanvasContext('shareCanvas') //获取画布
   
    // wx.getImageInfo 获取图片
    wx.getImageInfo({
      src: 'image_path', //图片路径      
      success: function (res) {
        ctx.setFillStyle('white') //设置画布底色为白色
        ctx.fillRect(0, 0, 250, 400) //画布大小,四个参数为,左上角的横坐标、左上角的纵坐标、宽度、高度
 
         // 将获取的图片写入画布
        ctx.drawImage(res.path, 0, 0, 250,270)//五个参数为,获取图片的返回路径、左上角的横坐标、左上角的纵坐标、宽度、高度
 
        // 向画布中加入文字
        ctx.setTextAlign('left')    // 文字居中
        ctx.setFillStyle('#000')  // 文字颜色:黑色
        ctx.setFontSize(14)         // 文字字号:22px
        ctx.fillText('此处添加文字描述', 10, 290)//三个参数为,文本内容、左上角的横坐标、左上角的纵坐标
        ctx.fillText('此处添加文字内容', 10, 380)
        //获取小程序码图片
        wx.getImageInfo({
          src: 'code_path',//图片路径 
          success: function (res) {
            // 小程序码大小
            const qrImgSize = 80
            ctx.drawImage(res.path, 160, 280, qrImgSize, qrImgSize)
            ctx.draw()                  
          }
        })
      }})
  },

 

3、创建完成之后保存到相册

 savePhoto: function () {    
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas', //画布ID
      fileType: 'jpg',  //保存格式
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath, //返回的保存路径
          success(e) {
            wx.showToast({
              title: '已保存到相册'
            })
          }
      })
    }})   
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论