微信小程序上传图片到七牛并加水印

微信小程序上传图片到七牛并通过canvas加水印
第一次写博客，请求大佬指点

const app = getApp()
const qiniuUploader = require("../../utils/qiniuUploader");

//七牛初始化 因为我比较菜没敢改动 这个是官方的demo 大佬如果看到我的代码可以帮忙指点一下 感谢
function initQiniu(token) {
  console.log(token, "我传过来了");
  var time = new Date();
  var options = {
    region: 'NCN',
    uptoken: token,
    key: "shop/hourse",
    domain: 'bzkdlkaf.bkt.clouddn.com',
    shouldUseQiniuFileName: true,
  }
  qiniuUploader.init(options);
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageObject: {},
    url: "",
    images: [],
    pathsTmp: [],
    canvasWidth: "",
    canvasHeight: "",
    template: {},
  // 上传图片主线
  imgUpData() {
    let that = this;
    async function canvas1() {
      let xx= await getToken(that);//获取token
      console.log(xx.data.data,"token");
      initQiniu(xx.data.data);
      let a = await hhh(); //选择图片
      let b = await getImgInfo(a); //获取图片信息
      // let c = await getImgInfo(a);//画图
      let c = canvas(that, b);
      let d = await Draw(c);
      let e = await lwqdraw(d);//从canvas 上获取图片信息并将图片信息传给七牛 
      qiniu(that, e.tempFilePath, xx.data.dataW)

    }
    canvas1();
  },44
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log("你执行了吗")
    this.getHouseTemplate();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

})

function hhh() {
  return new Promise((resolve, reject) => {
    wx.chooseImage({
      count: 1,
      success: function(res) {
        resolve(res.tempFilePaths[0]);
      }
    })
  })
}

function getImgInfo(imgpath) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: imgpath,
      success: function(res) {
        resolve(res);
      }
    })
  })
}

function getCanvasImg(firstCanvas) {
  return new Promise((resolve, reject) => {
    wx.canvasToTempFilePath({
      canvasId: firstCanvas,
      success: function(res) {
        resolve(res);
      }
    })
  })
}

function Draw(ctx) {
  return new Promise((resolve, reject) => {
    ctx.draw(false, resolve())
  })
}
//绘制
function canvas(that, b) {
  let ctx = wx.createCanvasContext('firstCanvas');
  let width = b.width,
    height = b.height
  that.setData({
    canvasHeight: b.height,
    canvasWidth: b.width
  })
  ctx.drawImage(b.path, 0, 0, width, height);
  ctx.rotate(45 * Math.PI / 180); //设置文字的旋转角度，角度为45°
  ctx.beginPath();
  ctx.setFontSize(30); //字号大小
  ctx.setFillStyle('red'); //颜色
  ctx.fillText('郑州鼎元科技', 200,  100); //内容
  ctx.strokeText('郑州鼎元科技',100,  100);
  return ctx
}
//获取token
function getToken(that){
   return new Promise((resolve,reject)=>{
     wx.request({
       url: "",
       data: "123",
       type: "get",
       success: function (res) {    
         resolve(res);
       }
     })
   })
 
}

function lwqdraw(d){
  return new Promise((resolve,reject)=>{
    setTimeout(async function () {
      let e = await getCanvasImg('firstCanvas', d);
      resolve(e)
    }, 2000)
  })
}
//七牛上传 没有进行改造
function qiniu(that, filePath,token){
  qiniuUploader.upload(filePath, (res) => {
    that.setData({
      'imageObject': res
    });
    console.log(res)
    console.log('file url is: ' + res.fileUrl)
  }, (error) => {
    console.error('error: ' + JSON.stringify(error));
  }, {
      region: 'NCN', // 华北区
      domain: 'bzkdlkaf.bkt.clouddn.com',
      shouldUseQiniuFileName: false,
      uptoken: token,
      key: 'hourse' + (new Date()).getTime() + '.jpg',

    },
    (progress) => {
      console.log('上传进度', progress.progress)
      console.log('已经上传的数据长度', progress.totalBytesSent)
      console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend)
    }, cancelTask => that.setData({
      cancelTask
    })
  );
}