daliangzao/customized/pages/boxMade/boxComb/boxComb.js

// customized/pages/made/combination/combination.js
import * as util from '../../../../utils/util.js'
let app = getApp();
let host = app.globalData.servsers; // 请求的url
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj1: {},
    dataPositionObj2: {},
    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: {},

    imgSrcArray: [],
    buildSrcArrayText: {
      '1': '正面',
      '2': '背面',
    },
    buildSrcArray: [],
    dataId:[],
    customGoodsImg: "",
    customGoodsMaterial:"",//定制资源图片

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if ('dataId' in options) {
      this.setData({
        obverseImgObject: util.changeImg,//素材
        dataPositionObj1: util.changeCup(options.dataId.split(',')[0].toString()).dataPositionObj,
        dataPositionObj2: util.changeCup(options.dataId.split(',')[1].toString()).dataPositionObj,
        dataId: options.dataId.split(',')
      })
    }
  },

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

    wx.showLoading({
      title: '图片合成中...'
    })
    let that = this,
      result = true,
      dataId = that.data.dataId;

    if (wx.getStorageSync('madeCupImgData' + dataId[0]) || wx.getStorageSync('madeCupFontData' + dataId[0])) {
      that.getCombImg(that, dataId[0],1);
      result = false
    } else if (wx.getStorageSync('madeCupImgData' + dataId[1]) || wx.getStorageSync('madeCupFontData' + dataId[1])) {
      that.getCombImg(that, dataId[1],2);
      result = false
    }

    if (result) {
      wx.hideLoading();
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  getCombImg(that, i,id) {
    let imgTouch = null,
      dataPositionObj = null;
    that.setData({ // imgSrcArray 初始化
      imgSrcArray: [],
    })
    console.log(wx.getStorageSync('madeCupImgData' + i), "wx.getStorageSync('madeCupImgData' + i)")
    if (wx.getStorageSync('madeCupImgData' + i)) {
      imgTouch = wx.getStorageSync('madeCupImgData' + i);
      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      console.log(dataPositionObj, imgTouch,"dataPositionObj")
      let customGoodsMaterial = that.data.customGoodsMaterial;
      customGoodsMaterial += imgTouch.src.replace(host,'')+',';
      that.setData({
        customGoodsMaterial: customGoodsMaterial
      })
      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' + id);
                //画布中点坐标转移到图片中心
                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(false, function () {
                  wx.canvasToTempFilePath({
                    canvasId: 'comb-img' + id,
                    success: function (res) {
                      console.log(res)
                      let imgArray = that.data.imgSrcArray;
                      imgArray.push(res.tempFilePath)
                      that.setData({
                        imgSrcArray: imgArray
                      })
                      that.getCombFont(that, i, true,id);
                    }
                  }, that)
                })
              }
            },
            error(err){
              console.log('err下载失败',err)
            }
          })

        },
      })
    } else {
      that.getCombFont(that, i, false,id);
      console.log("没有图片往下执行")
    }



  },
  getCombFont(that, i, _static,id) {
    let fontTouch = null,
      dataPositionObj = null,
      simulationFont = null;
    if (wx.getStorageSync('madeCupFontData' + i)) {
      fontTouch = wx.getStorageSync('madeCupFontData' + i);
      simulationFont = wx.getStorageSync('simulationFont' + i);
      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      
      const ctx = wx.createCanvasContext('comb-font' + id);
      console.log(id, ctx,"console.log(id,)")
      // ctx.textBaseline = 'top';
      ctx.setFontSize(fontTouch.fontSize);
      ctx.setFillStyle(fontTouch.isColor);
      if (fontTouch.bold) {
        ctx.fillText(fontTouch.fontContent, -1, simulationFont.height / 5 * 4)
        ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 - 1)
      }
      ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4)
      if (fontTouch.bold) {
        ctx.fillText(fontTouch.fontContent, 1, simulationFont.height / 5 * 4)
        ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 + 1)
      }
      ctx.restore()
      ctx.draw(false, function () {
        wx.canvasToTempFilePath({
          canvasId: 'comb-font' + id,
          success: function (res) {
            console.log(res)
            that.getCombFontImg(that, res.tempFilePath, fontTouch, i,id)
          }
        }, that)
      })
    } else {
      that.getComb(that, that.data.imgSrcArray, i, _static,id)
    }

  },
  getCombFontImg(that, img, fontTouch, i,id) { // 生产字体图片后在进行处理一次
    let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        console.log(res)
        // canvas截图区域与图片的宽度比例
        const ctx = wx.createCanvasContext('comb-font' + id + '-2');
        //画布中点坐标转移到图片中心
        let movex = fontTouch.x + dataPositionObj.width * rpx / 2;
        let movey = fontTouch.y + dataPositionObj.height * rpx / 2;
        ctx.translate(movex, movey);
        ctx.rotate(fontTouch.angle * Math.PI / 180);
        ctx.drawImage(img, -dataPositionObj.width * rpx / 2, -dataPositionObj.height * rpx / 2, dataPositionObj.width * rpx, dataPositionObj.height * rpx)
        ctx.draw(false, function () {
          wx.canvasToTempFilePath({
            canvasId: 'comb-font' + id + '-2',
            success: function (res) {
              console.log(res)
              let imgArray = that.data.imgSrcArray;
              imgArray.push(res.tempFilePath)
              that.setData({
                imgSrcArray: imgArray
              })
              that.getComb(that, that.data.imgSrcArray, i, true,id)
            }
          }, that)
        })
      },
    })
  },
  getComb(that, imgSrcArray, i, _static,id) {
    console.log(imgSrcArray, "imgSrcArray")
    if (_static) {
      let imgTouch = wx.getStorageSync('madeCupImgData' + i);
      let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      wx.downloadFile({
        url: that.data.obverseImgObject[i],
        success(res){
          if (res.statusCode === 200) {
            let canvasBg = res.tempFilePath;
            wx.getSystemInfo({
              success: function (res) {
                let rpx = res.windowWidth / 750;
                that.setData({
                  rpx: rpx
                });
                const ctx = wx.createCanvasContext('comb-canvas' + id);
                ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 800 * rpx);
                // 设置背景
                ctx.draw(true)
                imgSrcArray.forEach((res) => {
                  ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
                })
                wx.downloadFile({
                  url: that.data.obverseImgObject[i+'_2'],
                  success(file){
                    if (file.statusCode === 200) {
                      ctx.drawImage(file.tempFilePath, 0, 0, 750 * rpx, 800 * rpx);
                      ctx.draw(true, function () {
                        wx.canvasToTempFilePath({
                          canvasId: 'comb-canvas' + id,
                          success: function (res) {
                            that.uploadFile(res.tempFilePath, that, function (data) {
                              console.log(res, "合成成功");

                              let buildSrcArray = that.data.buildSrcArray;

                              buildSrcArray.push({
                                src: res.tempFilePath,
                                isActive: i,
                              });
                              console.log(buildSrcArray, "buildSrcArray")
                              that.setData({
                                buildSrcArray: buildSrcArray,
                              })
                              console.log('第一张图片合成结束，i='+i)
                              if (i < that.data.dataId[1]) {
                                i = i*1 + 1
                                that.getCombImg(that, i,2);
                              } else {
                                wx.hideLoading()
                              }
                            })

                          },
                          fail: function (err) {
                            console.log(err, "合成失败")
                            wx.hideLoading();
                          }
                        }, that)
                      })
                    } else {
                      wx.showToast({
                        title: '合成资源图片不存在，请联系客服',
                        icon: 'error'
                      })
                      wx.hideLoading();
                    }
                  }
                })
                

                
              },
            })
          } else {
            wx.showToast({
              title: '合成资源图片不存在，请联系客服',
              icon:'error'
            })
            wx.hideLoading();
          }
        }
      })
      
      
    } else {
      console.log("走了这里哈,i值等于",i)
      if (i < that.data.dataId[1]) {
        i = i*1 + 1
        that.getCombImg(that, i,2);
      } else {
        wx.hideLoading()
      }
    }

  },
  addImgRouter() { // add car
    let that = this;
    console.log(that.data.customGoodsImg, "that.data.customGoodsImg")

    wx.request({
      url: host + '/addShopCar',
      method: 'post',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        customGoodsImg: that.data.customGoodsImg.substring(0, that.data.customGoodsImg.length - 1),
        customGoodsName: wx.getStorageSync('detail').customgoodsName,
        customGoodsNum: 1,
        userId: app.globalData.user_id,
        customGoodsId:wx.getStorageSync('detail').id,
        customGoodsMaterial: that.data.customGoodsMaterial.substring(0, that.data.customGoodsMaterial.length-1),
      },
      success: function (res) {
        console.log(res, "加入购物车")
        if (res.data === 'success') {
          wx.showModal({
            title: '提示',
            content: '加入购物车成功,是否去购物车结算商品？',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
                wx.redirectTo({
                  url: '/customized/pages/car/car',
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }
      }
    })
  },
  uploadFile(path, that, cb) {
    let customGoodsImg = that.data.customGoodsImg;
    wx.uploadFile({
      url: host + 'fileUpload',
      filePath: path,
      name: 'file',
      formData: {
        file: path,
        userId: app.globalData.user_id,
        imgStatus: 1, // 表示合成
      },
      success: function (res) {
        console.log(res, "rrrr");
        customGoodsImg += res.data + ',';
        that.setData({
          customGoodsImg: customGoodsImg
        })
        cb(true)
      },
      fail: function (res) {
        cb(false)
      }
    })
  },

})