合成图片

customized/pages/made/combination/combination.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "disableScroll": true
 }

customized/pages/made/combination/combination.wxml

@@ -1,3 +1,5 @@
 <canvas canvas-id="comb-canvas" class="comb-content"></canvas>
-<canvas canvas-id='comb-img' class='comb-img'></canvas>
-<canvas canvas-id='comb-font' class='comb-font'></canvas>
+<view style="position:fixed;top:999999999999999999999rpx;">
+    <canvas canvas-id='comb-img' class='comb-img'  hidden='{{canvasHidden}}'></canvas>
+    <canvas canvas-id='comb-font' class='comb-font'  hidden='{{canvasHidden}}'></canvas>
+</view>

customized/pages/made/made.js

@@ -34,6 +34,8 @@ Page({
     touchStatic:true,
     fontContent:'可定制区域',
     rpx:1, // 获取页面的rpx
+    imgSrcArray: [],
+    imgBuildArray:[], // 生成后图片的数组
   },
 
   /**
@@ -188,6 +190,7 @@ Page({
     })
   },
   finishDesign(){ // 完成设计
+  let that = this;
     let designObj = {
       '1':'正面',
       '2': '背面',
@@ -214,9 +217,14 @@ Page({
           success: function (res) {
             if (res.confirm) {
               console.log('用户点击确定,不设计了，直接完成')
-              wx.navigateTo({
-                url: '/customized/pages/made/combination/combination',
+              wx.showToast({
+                title: '图片合成中...',
+                icon:'loading'
               })
+              that.getBuildImg(that)
+              // wx.navigateTo({
+              //   url: '/customized/pages/made/combination/combination',
+              // })
             } else {
               console.log('用户点击取消')
             }
@@ -229,7 +237,136 @@ Page({
         icon: 'none'
       })
     }
+  },
+  getBuildImg(that){
+    for(let i =1; i<=4;i++){
+      if (wx.getStorageSync('madeCupImgData'+i)) {
+        this.setData({
+          imgTouch: wx.getStorageSync('madeCupImgData'+i)
+        })
+      }
+      if (wx.getStorageSync('madeCupFontData'+i)) {
+        this.setData({
+          fontTouch: wx.getStorageSync('madeCupFontData'+i)
+        })
+      }
+      that.getCombImg(that);
+      console.log(i)
+    }
+    console.log(that.data.imgBuildArray,"that.data.imgBuildArray")
     
-    
+  },
+  // 合成canvas的js
+  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');
+
+    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 / 10 * 3);
+    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,"最后的合成")
+              let imgBuildArray = that.data.imgBuildArray;
+              imgBuildArray.push(res.tempFilePath)
+              that.setData({
+                imgSrcArray: [],// 重置
+                imgBuildArray: imgBuildArray
+              })
+            }
+          }, that)
+        });
+        
+      },
+    })
   }
 })

customized/pages/made/made.json

@@ -3,5 +3,6 @@
   "backgroundColor": "#fff",
   "usingComponents": {
     "made-solid": "/components/component-made/made-solid"
-  }
+  },
+  "disableScroll": true
 }

customized/pages/made/made.wxml

@@ -6,6 +6,11 @@
 <!-- </canvas> -->
 
 
+<view style="position:fixed;top:999999999999999999999rpx;">
+    <canvas canvas-id="comb-canvas" class="comb-content"></canvas>
+    <canvas canvas-id='comb-img' class='comb-img'></canvas>
+    <canvas canvas-id='comb-font' class='comb-font'></canvas>
+</view>
 
 <view class='content'>
 <view class='made-content'>