Cao Note

外观

常用功能 ​

canvas 生成海报 ​

js
postersExclusive: function () {
    this.setData({
        canvasType: true
    })
    wx.showLoading({
        title: '生成中'
    })
    const ctx = wx.createCanvasContext('myCanvas');
    wx.getImageInfo({
        src: this.data.imagePath,
        success: (res) => {
            ctx.drawImage(res.path, 0, 0, this.pxToRpx(598), this.pxToRpx(812));
            this.base64ToTempFileUrl(this.data.Info.inviteCode).then(res => {
                ctx.drawImage(res, this.pxToRpx(174), this.pxToRpx(350), this.pxToRpx(248), this.pxToRpx(252));
                wx.hideLoading()
                ctx.draw();
            })
        },
        fail: (err) => {
            console.error(err);
        }
    });
},
base64ToTempFileUrl: function (base64File) {
        const fsm = wx.getFileSystemManager();
        let extName = base64File.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        }
        let fileName = Date.now() + '.' + extName
        return new Promise((resolve, reject) => {
            let filePath = wx.env.USER_DATA_PATH + '/' + fileName
            fsm.writeFile({
                filePath,
                data: base64File.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: (res) => {
                    resolve(filePath);
                },
                fail() {
                    reject('写入失败');
                },
            });
        });
    },
pxToRpx(rpx) {
    const {
      windowWidth
    } = wx.getSystemInfoSync();
    let rpxToPx = windowWidth / 750;
    return rpx * rpxToPx
  },
postersExclusive: function () {
    this.setData({
        canvasType: true
    })
    wx.showLoading({
        title: '生成中'
    })
    const ctx = wx.createCanvasContext('myCanvas');
    wx.getImageInfo({
        src: this.data.imagePath,
        success: (res) => {
            ctx.drawImage(res.path, 0, 0, this.pxToRpx(598), this.pxToRpx(812));
            this.base64ToTempFileUrl(this.data.Info.inviteCode).then(res => {
                ctx.drawImage(res, this.pxToRpx(174), this.pxToRpx(350), this.pxToRpx(248), this.pxToRpx(252));
                wx.hideLoading()
                ctx.draw();
            })
        },
        fail: (err) => {
            console.error(err);
        }
    });
},
base64ToTempFileUrl: function (base64File) {
        const fsm = wx.getFileSystemManager();
        let extName = base64File.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        }
        let fileName = Date.now() + '.' + extName
        return new Promise((resolve, reject) => {
            let filePath = wx.env.USER_DATA_PATH + '/' + fileName
            fsm.writeFile({
                filePath,
                data: base64File.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: (res) => {
                    resolve(filePath);
                },
                fail() {
                    reject('写入失败');
                },
            });
        });
    },
pxToRpx(rpx) {
    const {
      windowWidth
    } = wx.getSystemInfoSync();
    let rpxToPx = windowWidth / 750;
    return rpx * rpxToPx
  },

保存 canvas 到相册 ​

js
  savePosterPic() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            wx.showToast({
              title: '图片已成功保存到相册',
              icon: 'success'
            });
          },
          fail: (err) => {
            console.error(err);
            wx.showToast({
              title: '保存图片到相册失败，请重试',
              icon: 'none'
            });
          }
        });
      },
      fail: (err) => {
        console.error(err);
      }
    });
  },
  savePosterPic() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            wx.showToast({
              title: '图片已成功保存到相册',
              icon: 'success'
            });
          },
          fail: (err) => {
            console.error(err);
            wx.showToast({
              title: '保存图片到相册失败，请重试',
              icon: 'none'
            });
          }
        });
      },
      fail: (err) => {
        console.error(err);
      }
    });
  },

canvas 分享到微信 ​

js
SharePoster() {
    this.base64ToTempFileUrl(this.data.Info.inviteCode).then(resssss => {
      console.log(resssss,'resssss');
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          wx.miniapp.shareImageMessage({
            imagePath: res.tempFilePath,
            thumbPath: resssss,
            scene: 0,
            success: () => {
              wx.showToast({
                title: '图片分享成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error(err);
              wx.showToast({
                title: '分享失败，请重试',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error(err);
        }
      });
    })

  },
SharePoster() {
    this.base64ToTempFileUrl(this.data.Info.inviteCode).then(resssss => {
      console.log(resssss,'resssss');
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          wx.miniapp.shareImageMessage({
            imagePath: res.tempFilePath,
            thumbPath: resssss,
            scene: 0,
            success: () => {
              wx.showToast({
                title: '图片分享成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error(err);
              wx.showToast({
                title: '分享失败，请重试',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error(err);
        }
      });
    })

  },

Copyright © 2024-present xiaocao