微信小程序Canvas画布绘制以及保存_小程序canvas drawimage保留历史绘制

<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongtap="bao" ></canvas>

绘制图像

 
                    var code=t.data.wxcode;
                    /*code是指图片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),
                      encoding: 'base64',
                      success: () => {
                          console.log(codeimg);
                        //写入成功了的话，新的图片路径就能用了
                        var ctx = wx.createCanvasContext('firstCanvas'); //获取canvas标签id
                        ctx.drawImage('/pages/image/friend.jpg', 0, 0, 320, 500);
                        ctx.drawImage(codeimg, 80, 240, 170, 170);
                        ctx.drawImage('/pages/image/esc.png', 288, 7, 30, 30);
                        ctx.draw();
                      }
                    });

保存

      save(){
        var _this = this;
        wx.canvasToTempFilePath({
          // 把画布转化成临时文件
          x: 0,
          y: 0,
          width: 380, // 截取的画布的宽
          height: 600, // 截取的画布的高
          destWidth: 380, // 保存成的画布宽度
          destHeight: 600, // 保存成的画布高度
          fileType: 'jpg', // 保存成的文件类型
          quality: 1, // 图片质量
          canvasId: 'firstCanvas', // 画布ID
          success(res) {
            // 2-保存图片至相册
            wx.saveImageToPhotosAlbum({
              // 存成图片至手机
              filePath: res.tempFilePath,
              success(res2) {
                wx.hideLoading();
                wx.showToast({
                  title: '保存成功',
                  duration: 2000
                });
              },
              fail(res3) {
                if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                  wx.showToast({
                    title: '保存失败，稍后再试',
                    duration: 2000,
                    icon: 'none'
                  });
                  wx.hideLoading();
                } else {
                  wx.showToast({
                    title: '保存失败，稍后再试',
                    duration: 2000,
                    icon: 'none'
                  });
                  wx.hideLoading();
                }
              }
            });
          },
          fail() {
            uni.showToast({
              title: '保存失败，稍后再试',
              duration: 2000,
              icon: 'none'
            });
            uni.hideLoading();
          }
        });
      },