Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    imgUrl: "項目中圖片地址", //圖片鏈接
    img: '' // 合成后圖片路徑
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    wx.downloadFile({
      url: '線上圖片地址',
      success(res) {
        // 繪制背景海報到canvas
        var postersize = that.setCanvasSize(750);//動態(tài)設(shè)置畫布大小
        const ctx = wx.createCanvasContext('shareCanvas')
        ctx.drawImage(that.data.imgUrl, 0, 0, postersize.w, postersize.h)

        var re = wx.getSystemInfoSync();
        var scale = 750 / 180;
        var width = re.windowWidth / scale;
        var height = width
        var leftscale = 750 / 480; // 180為left
        var left = re.windowWidth / leftscale;
        var topscale = 750 / 880; // 180為top
        var top = re.windowWidth / topscale;
        ctx.drawImage(res.tempFilePath, left, top, width, height)
        ctx.draw()

        setTimeout(() => {
          // code_url = this.canvasToTempImage(); 
          //獲取臨時緩存合成照片路徑，存入data中
          wx.canvasToTempFilePath({
            canvasId: 'shareCanvas',
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              that.setData({
                img: tempFilePath
              })
              console.log(tempFilePath)
            },
            fail: function (res) {
              console.log(res);
            }
          });
        }, 1000);

      }
    })


    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  },
  //適配不同屏幕大小的canvas
  setCanvasSize: function (width) {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / width;//不同屏幕下canvas的適配比例站楚；設(shè)計稿是750寬
      // var scale = 1
      var width = res.windowWidth / scale;
      var height = res.windowHeight / scale;;
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("獲取設(shè)備信息失敗" + e);
    }
    return size;
  },
  //點擊圖片進(jìn)行預(yù)覽脱惰，長按保存分享圖片
  previewImg: function (e) {
    var img = this.data.img;
    let _this = this;
    //保存二維碼到相冊

    wx.saveImageToPhotosAlbum({
      filePath: img,
      success: function (res) {
        wx.showModal({
          content: '保存成功',
          confirmText: '確認(rèn)',
          showCancel: false,
          success: function (res) {

          }
        });
      },
      fail: function (res) {
        wx.showModal({
          content: '保存失敗',
          confirmText: '確認(rèn)',
          showCancel: false,
          success: function (res) {

          }
        });
      }
    })
  },

  
})