小程序 canvas 拼接图片 下载图片 海报 新版 旧版 版本库2.9

感谢

https://blog.csdn.net/weixin_47170010/article/details/123463994

需求是这样的

背景图叠加二维码图片,点击按钮后能够下载叠加后的图片

小程序html代码

<view class="addcar-box">
  <view class="addcar-img-box">
    <canvas id="share" type="2d" class="share"></canvas>
  </view>
</view>

小程序js代码

流程就是

注:我的二维码是接口返回的base64,如果是图片路径,可以直接在base64赋值的地方改为图片url即可

1.先 获取canvas组件

2.添加背景图

3.添加二维码

4.点击按钮下载生成好的图片

Page({

  /**
   * 页面的初始数据
   */
  data: {
    qrcode:'',//二维码base64
    qrcode_bg:'https://xxx.xxx.xxx/uploads/move_car_bg.png',//背景图地址
    bg_height:350,//背景图高度
    bg_width:350,//背景图宽度
    qr_height:150,//二维码高度
    qr_width:150,//二维码宽度
    qr_top:100,//二维码距离顶部距离
    canvas:null,
    ctx:null
  },
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {this.getqrcode()
  },
//获取二维码
  getqrcode:function(){
    let that = this
　　that.setData({
　　　　qrcode:'图片路径或者base64'
　　})

  },

  //创建挪车码合并图
  createQR:function(){
    let that = this
    let _x = (that.data.bg_width-that.data.qr_width)/2;//计算出二维码x坐标位置
var codeimgs = that.data.qrcode  //生成的二维码图像
//下面注释的是老版本的,不建议使用,用的时候,canvas组件需要加上 canvas-id 属性,值为share(如下代码中的id)

        // const ctx = wx.createCanvasContext('share'); //获取到canvas实例
        // ctx.drawImage(that.data.qrcode_bg,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上
        // ctx.drawImage(codeimgs,    _x, that.data.qr_top, that.data.qr_width,that.data.qr_height) //将二维码图片绘制在画布上
    // ctx.draw()  //保存修改

    //新版写法
    const query = wx.createSelectorQuery()
//获取canvas组件
    query.select('#share')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
//将canvas和ctx放到data中
        that.setData({ canvas, ctx })
//获取设备像素比 下面
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
//为了防止背景后生成,二维码先生成,导致背景图覆盖二维码,使用了promise
        new Promise(function(resolve, reject){
//创建一个图片
          const bg = canvas.createImage()
//图片赋值具体url或者base64
          bg.src = that.data.qrcode_bg
//当图片加载完成时
          bg.onload = () => {
            // ctx.drawImage(bg,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上
            resolve(bg)
          }
        }).then(res=>{
//下面的代码同上,原理一样
          ctx.drawImage(res,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上
          const qr = canvas.createImage()
            qr.src = that.data.qrcode
            qr.onload=()=>{
              ctx.drawImage(qr,_x, that.data.qr_top, that.data.qr_width,that.data.qr_height) //将二维码图片绘制在画布上
              // resolve(qr)
            }
        })
        
        
//绘制一个100像素的正方形
        // ctx.fillRect(0, 0, 100, 100)
      })
  },
  //下载生成好的图片
  hidePayLayer(e){
    let that = this
 
        wx.canvasToTempFilePath({
      // canvasId: 'share', //通过id 指定是哪个canvas 低版本用
      canvas:that.data.canvas,//上一行的高版本替代
            success(res) {
                wx.saveImageToPhotosAlbum({  　//成功之后保存到本地
 
                    filePath: res.tempFilePath, //生成的图片的本地路径
                    success: function (res) {
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                        })
                    },
                    fail: function (res) {
                        
                    }
                })
            }
        })
    },
})