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: 56, 
      clientX: 0, 
      clientY: 0,
      width:10,
      height:10
    },
    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')
      })
    }
    if (wx.getStorageSync('madeCupFontData1')){
      this.setData({
        fontTouch: wx.getStorageSync('madeCupFontData1')
      })
    }
    
    
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getCombImg(this);
    this.getCombFont(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)
                    that.getComb(that,res.tempFilePath)
                  }
                }, that)
              })
            }
          }
        })

      },
    })
  },
  getCombFont(that) {
    let fontTouch = that.data.fontTouch;
    let dataPositionObj = that.data.dataPositionObj;
    const ctx = wx.createCanvasContext('comb-font');

    let movex = fontTouch.x + fontTouch.width / 2;
    let movey = fontTouch.y + fontTouch.height / 2;
    ctx.translate(movex, movey);
    ctx.rotate(fontTouch.angle * Math.PI / 180);

    ctx.setFontSize(fontTouch.fontSize);
    ctx.setFillStyle(fontTouch.isColor);
    // ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 *4);
    ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 5 * 4 - fontTouch.height / 2);
    ctx.draw()
  },
  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];
        const ctx = wx.createCanvasContext('comb-canvas');
        ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
        ctx.draw();
        // 设置背景
        ctx.drawImage(imgSrc, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
        ctx.draw(true)
      },
    })
  }
})