daliangzao/customized/pages/made/combination/combination.js

// customized/pages/made/combination/combination.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj: { //正面数据
      top: 156,
      left: 286,
      width: 270,
      height: 270
    },
    imgTouch: { 
      isActive: "1",
      src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg", 
      x: -82,
      y: 17, 
      clientX: 195, 
      clientY: 121, 
      width: 517, 
      height: 208.17866666666666, 
      scale: 2.4834437086092715, 
      angle: 27 
    },
    rpx:1,
    obverseImgObject: {
      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (wx.getStorageSync('madeCupImgData1')){
      this.setData({
        imgTouch: wx.getStorageSync('madeCupImgData1')
      })
    }
    
    
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getCombImg(this)
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  getCombImg(that){
    let imgTouch = that.data.imgTouch;
    let dataPositionObj = that.data.dataPositionObj;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        wx.downloadFile({
          url: imgTouch.src, // 仅为示例，并非真实的资源
          success(res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            console.log(res)
            if (res.statusCode === 200) {
              // canvas截图区域与图片的宽度比例
              let dWidth = dataPositionObj.width / imgTouch.width;
              // canvas截图区域与图片的高度比例
              let dHeight = dataPositionObj.height / imgTouch.height;
              const ctx = wx.createCanvasContext('comb-img');
              // 设置背景
              // ctx.setFillStyle('red')
              // ctx.fillRect(0, 0, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
              ctx.drawImage(res.tempFilePath,imgTouch.x,imgTouch.y,imgTouch.width * rpx,imgTouch.height * rpx)
              ctx.draw(true,function(){
                wx.canvasToTempFilePath({
                  canvasId: 'comb-img',
                  success:function(res){
                    console.log(res)
                    that.getComb(that,res.tempFilePath)
                  }
                }, that)
              })
            }
          }
        })

      },
    })
  },
  getComb(that,imgSrc){
    let imgTouch = that.data.imgTouch;
    let dataPositionObj = that.data.dataPositionObj;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        let canvasBg = that.data.obverseImgObject[1];
        wx.downloadFile({
          url: imgSrc, // 仅为示例，并非真实的资源
          success(res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            console.log(res)
            if(res.statusCode === 200){
              console.log(res)
              const ctx = wx.createCanvasContext('comb-canvas');
              ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
              ctx.draw();
              // 设置背景
              ctx.drawImage(res.tempFilePath, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height *rpx);
              ctx.draw(true)
            }
          }
        })
        
      },
    })
  }
})