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
    },
    fontTouch: {
      isActive: "1",
      fontContent: "Gg",
      isColor: "#ffffff",
      x: 10,
      y: 10,
      angle: 0,
      fontSize: 100,
      clientX: 0,
      clientY: 0,
      width: 138.34375,
      height: 132
    },
    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',
      /*底部 */
    },
    imgSrcArray: [],
    buildSrc: '',
  },

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


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  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');
              //画布中点坐标转移到图片中心
              let movex = imgTouch.x + imgTouch.width * rpx / 2;
              let movey = imgTouch.y + imgTouch.height * rpx / 2;
              ctx.translate(movex, movey);
              ctx.rotate(imgTouch.angle * Math.PI / 180);
              ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
              ctx.draw(true, function () {
                wx.canvasToTempFilePath({
                  canvasId: 'comb-img',
                  success: function (res) {
                    console.log(res)
                    let imgArray = that.data.imgSrcArray;
                    imgArray.push(res.tempFilePath)
                    that.setData({
                      imgSrcArray: imgArray
                    })
                    that.getCombFont(that);
                  }
                }, that)
              })
            }
          }
        })

      },
    })
  },
  getCombFont(that) {
    let fontTouch = that.data.fontTouch;
    let dataPositionObj = that.data.dataPositionObj;
    const ctx = wx.createCanvasContext('comb-font');
    ctx.setFontSize(fontTouch.fontSize);
    ctx.setFillStyle(fontTouch.isColor);
    // ctx.translate(0, 0);
    // ctx.save();
    let movex = fontTouch.x + fontTouch.width / 2;
    let movey = fontTouch.y + fontTouch.height /10* 3 ;
    ctx.translate(movex, movey);
    ctx.rotate(fontTouch.angle * Math.PI / 180);
    // ctx.translate(movex, movey);
    // ctx.rotate(fontTouch.angle * Math.PI / 180);
    ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 2 );
    // ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
    
    ctx.draw(true, function () {
      wx.canvasToTempFilePath({
        canvasId: 'comb-font',
        success: function (res) {
          console.log(res)
          let imgArray = that.data.imgSrcArray;
          imgArray.push(res.tempFilePath)
          that.setData({
            imgSrcArray: imgArray
          })
          console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
          that.getComb(that, that.data.imgSrcArray)
        }
      }, that)
    })
  },
  getComb(that, imgSrcArray) {
    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];
        const ctx = wx.createCanvasContext('comb-canvas');
        ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
        ctx.draw(true);
        // 设置背景
        imgSrcArray.forEach((res) => {
          ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
        })
        ctx.draw(true, function () {
          wx.canvasToTempFilePath({
            canvasId: 'comb-canvas',
            success: function (res) {
              console.log(res, "合成成功")
              that.setData({
                buildSrc: res.tempFilePath
              })
              // let imgArray = that.data.imgSrcArray;
              // imgArray.push(res.tempFilePath)
              // that.setData({
              //   imgSrcArray: imgArray
              // })
              // console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
              // that.getComb(that, that.data.imgSrcArray)
            },
            fail: function (err) {
              console.log(err, "合成失败")
            }
          }, that)
        })
      },
    })
  }
})