<view class="container">
  <view class="body canvas-space">
    <canvas canvas-id="canvas" style="width:{{375 * rpx}}px;height:{{600 * rpx}}px" class="canvas"></canvas>
  </view>

  <view catchtap='save' class="saveImg">保存優惠券</view>
</view>

onLoad: function (option) {
   this.ctx = tt.createCanvasContext('canvas');
   let res = tt.getSystemInfoSync()
    this.setData({
      rpx: res.windowWidth / 375
    })
    this.setData({
      rpx: res.windowWidth / 375
    })
}
drawBackground() {
    var that = this
    let ctx = this.ctx;
    let res = tt.getSystemInfoSync()
    let rpx = res.windowWidth / 375
    console.log('res.windowWidth',res)

    that.setData({
      rpx: res.windowWidth / 375
    })

    //我是大背景
    ctx.setFillStyle('#602671');    //為創建的canvans上下文添充顏色  如果沒有設置 fillStyle，默認顏色為 black。
    ctx.fillRect(0, 0, 375 * rpx, 600 * rpx)

    //我是白色背景
    ctx.setFillStyle('white');    //為創建的canvans上下文添充顏色  如果沒有設置 fillStyle，默認顏色為 black。
    ctx.fillRect(27.5 * rpx, 58 * rpx, 320 * rpx, 495 * rpx)



    ctx.save();
    ctx.beginPath(); //開始繪制
    //  先畫個圓
    // ctx.arc(190 * rpx, 60 * rpx, 30 * rpx, 0 * rpx, Math.PI * 2, false);  //false代表順時針  圖片的位置加半徑
    // ctx.setStrokeStyle('white')
    ctx.clip();//畫了圓 再剪切  原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區域，則所有之后的繪圖都會被限制在被剪切的區域內
    ctx.drawImage('/image/logo2.png', 158 * rpx, 30 * rpx, 60 * rpx, 60 * rpx); // 推進去圖片
    ctx.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下文即狀態 可以繼續繪制

    ctx.drawImage('/image/top.png', 27.5 * rpx, 50 * rpx, 320 * rpx, 10 * rpx);
    ctx.drawImage('/image/logo2.png', 160 * rpx, 31 * rpx, 60 * rpx, 47 * rpx);

    ctx.drawImage('/image/tit.png', 110 * rpx, 100 * rpx, 150 * rpx, 60 * rpx);

   

    ctx.setFillStyle("#602671");
    ctx.setFontSize(30 * rpx);                               //字大小
    ctx.setTextAlign('left');                        //是否居中顯示，參考點畫布中線
    ctx.fillText(this.data.coupon.order_price, 143 * rpx, 157 * rpx);

    ctx.setFillStyle("#602671");
    ctx.setFontSize(30 * rpx);                               //字大小
    ctx.setTextAlign('left');                        //是否居中顯示，參考點畫布中線
    ctx.fillText(this.data.coupon.price, 230 * rpx, 157 * rpx);

    ctx.drawImage('/image/border.png', 73 * rpx, 175 * rpx, 230 * rpx, 230 * rpx);

    ctx.drawImage(this.data.code, 78 * rpx, 180 * rpx, 220 * rpx, 220 * rpx);

    ctx.drawImage('/image/line.png', 15 * rpx, 420 * rpx, 344 * rpx, 24 * rpx);

    ctx.drawImage('/image/text.png', 50 * rpx, 465 * rpx, 280 * rpx, 70 * rpx);

    ctx.drawImage('/image/bottom.png', 27 * rpx, 550 * rpx, 320 * rpx, 10 * rpx);
   

    ctx.draw();


  },

  draw() {
    var that = this
    let ctx = this.ctx;
    ctx.clearRect(0, 0, 300, 300); //每一次都要將canvas清空一下，不然秒針就會一直顯示在canvas上面   
    this.drawBackground();
    ctx.draw();
    //  that.saveImg()
    // var t = setTimeout(function () {
    //   that.saveImg()
    //   clearTimeout(t)
    // }, 2000)

  },

  save() {
    var that = this
    tt.authorize({
      scope: "scope.album",
      success:function(res) {
        console.log('success',res);
        // 用戶同意授權用戶信息
        that.saveImg()
      },
      fail:function(res) {
        console.log('fail',res);
        tt.showToast({
          title: '保存失敗',
          icon: 'error'
        })
      }
    });
  },
  saveImg() {
    let that = this;


    console.log(111111111)
    // var rpx = 1
    let rpx = that.data.rpx
    console.log('rpx',rpx)
    try {

      tt.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 375 * rpx,                     //畫布寬高
        height: 600 * rpx,
        destWidth: 1125 * rpx,                 //畫布寬高*dpr 以iphone6為準
        destHeight: 1800 * rpx,                //放大2倍以上，解決保存的圖片模糊的問題
        canvasId: 'canvas',
        success: function (res) {
          console.log('success--------', res) //生成的臨時圖片路徑
          tt.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              // console.log(res);
              tt.showToast({
                title: '保存成功',
              })
              tt.redirectTo({
                url: "/pages/index/index",
                success:function(redirectTo_res11) {
                  console.log(redirectTo_res11);
                },
                fail:function(redirectTores) {
                  console.log(`redirectTo 調用失敗`);
                },
              });
            },
            fail: function () {

              console.log('a')
            }
          })
        },
        complete: function (res) {
          console.log('complete---------', res)
        },
        fail: function (res) {
          console.log('error---------', res)
        }
      })
    } catch (e) {
      console.log('e-----', e)
    }
    //  console.log(3333)
  }