小程序生成图片并保存到手机

才意识到及时总结和做笔记的重要性。很多东西都是用的时候查，用完就忘了，下次还要继续查，关键是依然看不懂。哎，心累。虽然现在写了也不一定记住，但是复制自己写的代码总归容易一点。
还有，今晚不想加班啊啊啊啊啊。
让我回家早睡吧。
再加下去我这一头茂密的秀发就要保不住了。
哭唧唧。

image.png
好了好了，哭着也要搬砖。
我也是参考别人的https://blog.csdn.net/qq_37375882/article/details/79419596。还有php代码（虽然我看不懂），有需要的小伙伴建议参考喔（迷妹脸）。
关于canvas宽度自适应：https://blog.csdn.net/zSY_snake/article/details/81188128
关于canvas绘制圆形头像：https://www.cnblogs.com/-mrl/p/9072009.html
关于canvas绘制图片：https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.drawImage.html
关于canvas绘制网络图片：https://blog.csdn.net/qq_30641447/article/details/79377784?from=singlemessage
（现在被我改的很乱，有空再整理_{主要是参考，有问题可以评论问我}）

想要的效果图（紫色的虚线框不知道哪来的，请忽略。）：

image.png

好了，上我自己的代码：

<view class='canvas_box'>
  <canvas style="margin:0 auto;width:375px; height:596px;" canvas-id="myCanvas" hidden="{{canvasHidden}}"></canvas>
  <view class='canvas_btn' bindtap='savetup'>
    <image src='/pages/image/btn_bg.png'></image>
    保存图片
  </view>
</view>
<view class='canvas_sign'>保存图片到手机后，您可以到朋友圈分享该折扣</view>

page{background:#fff;}
.canvas_box{width:750rpx;height:1140rpx;position:relative;}
.canvas_btn{position:absolute;width:360rpx;height:70rpx;line-height:64rpx;left:196rpx;bottom:-35rpx;text-align:center;color:#fff;z-index:2;}
.canvas_btn image{position:absolute;width:360rpx;height:70rpx;top:0;left:0;z-index:-1 !important;}
.canvas_sign{text-align:center;margin:20rpx 0;color:#959595;margin-top:60rpx;}

data: {
    bgImgPath: '/pages/image/cloth.png',//封面大图
    xcxcode:"/pages/image/loved.png",//二维码
    price:'159',//价格
    title:'nazze 日系工装飞行员冬季夹克男',//标题
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      // nickName: app.globalData.userInfo.nickName,
      // avatarUrl: app.globalData.userInfo.avatarUrl
      nickName: '乐生',
      avatarUrl: ''//这是你的头像地址
    })
    
    //1. 请求后端API生成小程序码
    //that.getQr();

    //2. canvas绘制文字和图片
    const ctx = wx.createCanvasContext('myCanvas');
    var imgPath = '/pages/image/canvas.png';//黄色边框
    var avatarUrl = that.data.avatarUrl;//头像
    var nickName = that.data.nickName;//昵称
    var bgImgPath = that.data.bgImgPath;//封面大图
    var basicprofile = '/pages/image/zhiwen.png';//指纹图片
    var xcxcode = that.data.xcxcode;//二维码
    var price = that.data.price;//价格
    var title=that.data.title;//标题

    //填充背景（图片的白色背景）
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 375, 596);//坐标和宽高

    // 第一张图片（黄色边框）
    ctx.drawImage(imgPath, 18, 26, 340, 544);

    // 第二张图片（头像）
    ctx.drawImage(avatarUrl, 158, 47, 60, 60);

    //绘制昵称
    ctx.setFontSize(15);
    ctx.setFillStyle('#000000');
    ctx.fillText(nickName, 173, 127);

    //绘制标题
    ctx.setFontSize(18);
    ctx.setFillStyle('#000000');
    ctx.fillText('发起了一个折扣详情', 107, 163); 

    // 第三张图片（封面大图）
    ctx.drawImage(bgImgPath, 38, 185, 300, 162);

    //绘制符号￥
    ctx.setFontSize(15);
    ctx.setFillStyle('#DDB039');
    ctx.fillText('￥', 160, 379);

    //绘制价格
    ctx.setFontSize(26);
    ctx.setFillStyle('#DDB039');
    ctx.fillText(price, 174, 381);

    //绘制标题
    ctx.setFontSize(15);
    ctx.setFillStyle('#000');
    ctx.fillText(title, 57, 410);

    //绘制一条虚线

    // ctx.strokeStyle = 'blue';
    // ctx.beginPath();
    // ctx.setLineWidth(1);
    // ctx.setLineDash([2, 4]);
    // ctx.moveTo(10, 287);
    // ctx.lineTo(230, 287);
    // ctx.stroke();

    //绘制指纹图标
    ctx.drawImage(basicprofile, 76, 438, 67, 66);
    ctx.setFontSize(11);
    ctx.setFillStyle('#000');
    ctx.fillText('长按识别小程序码', 66, 526);

    //绘制二维码
    ctx.drawImage(xcxcode, 218, 426, 102, 102);

    ctx.draw();

  },
  savetup: function () {
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,
      height: 596,
      destWidth: 375,
      destHeight: 596,
      canvasId: 'myCanvas',
      success: function (res) {
        //调取小程序当中获取图片
        console.log(res.tempFilePath);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: '图片保存成功！',
              content: '请将图片分享到朋友圈',
              showCancel: false,
              confirmText: '知道了',
              confirmColor: '#72B9C3',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

最终效果图（红色小心心那里应该是二维码）：

wxc5a2dd32fd69cc6d.o6zAJs8z7fmUIAYqvc_i4B-emrXU.zTkK0qqj7PVGf6f9aa7b4cae6660597986e9b8fa2d05.png

图片路径和文字改成自己的，粘过去就能用。改改坐标啥的就行。如果有疑问请评论，我已经满脑子浆糊在崩溃的边缘试探。
加班加到想吐啊啊啊啊（也有可能是奶茶喝多了）
一个很好用的东西，canvas文字居中：

ctx.setTextAlign('center')
ctx.fillText('这是一段文字', 187 * upx, 122 * upx);//187是中轴线

官网：https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.setTextAlign.html?search-key=ctx.setTextAlign(%27center%27)