微信小程序Canvas画布绘制以及保存

<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();
          }
        });
      },

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值