canvas合成

app.json

@@ -91,11 +91,12 @@
     {
       "root": "customized",
       "name": "customized",
-      "pages":[
+      "pages": [
         "pages/index/index",
         "pages/made/made",
         "pages/made/madeImg/madeImg",
-        "pages/made/madeFont/madeFont"
+        "pages/made/madeFont/madeFont",
+        "pages/made/combination/combination"
       ]
     }
   ],

customized/pages/made/combination/combination.js

@@ -0,0 +1,167 @@
+// 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)
+            }
+          }
+        })
+        
+      },
+    })
+  }
+})

customized/pages/made/combination/combination.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

customized/pages/made/combination/combination.wxml

@@ -0,0 +1,2 @@
+<canvas canvas-id="comb-canvas" class="comb-content"></canvas>
+<canvas canvas-id='comb-img' class='comb-img'></canvas>

customized/pages/made/combination/combination.wxss

@@ -0,0 +1,13 @@
+/* customized/pages/made/combination/combination.wxss */
+page{
+  background:#fff;
+}
+.comb-content{
+ width:750rpx;
+ height:588rpx;
+}
+.comb-img{
+  width:270rpx;
+  height:270rpx;
+  background:red;
+}

customized/pages/made/made.js

@@ -193,28 +193,43 @@ Page({
       '2': '背面',
       '3': '手柄',
       '4': '杯底',
-    },designVal = '';
+    },designVal = '',madeStatic = false;
     for(let i=1;i<5;i++){
-      
       if (!wx.getStorageSync('madeCupImgData'+ i) && !wx.getStorageSync('madeCupFontData'+ i)){
         designVal += designObj[i]+','
+      } else {
+        madeStatic = true; // 表示已经有设计过的页面
       }
     }
-    if (!designVal){
-      console.log('可以完成')
-    } else {
-      wx.showModal({
-        title: '温馨提示',
-        content: '您的' + designVal.substring(0, designVal.length-1) + '还没有设计，是否确定不设计了？',
-        success:function(res){
-          if (res.confirm) {
-            console.log('用户点击确定,不设计了，直接完成')
-          } else {
-            console.log('用户点击取消')
+    if (madeStatic){
+      if (!designVal) {
+        console.log('可以完成')
+        wx.navigateTo({
+          url: '/customized/pages/made/combination/combination',
+        })
+      } else {
+        wx.showModal({
+          title: '温馨提示',
+          content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计，是否确定不设计了？',
+          success: function (res) {
+            if (res.confirm) {
+              console.log('用户点击确定,不设计了，直接完成')
+              wx.navigateTo({
+                url: '/customized/pages/made/combination/combination',
+              })
+            } else {
+              console.log('用户点击取消')
+            }
           }
-        }
+        })
+      }
+    } else {
+      wx.showToast({
+        title: '您还没有设计',
+        icon: 'none'
       })
     }
     
+    
   }
 })

customized/pages/made/made.wxss

@@ -6,8 +6,6 @@ page{
 .made-content{
  width:750rpx;
  height:588rpx;
-
-
 }
 .made-content-canvas{
  position:absolute;

project.config.json

@@ -28,7 +28,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 0,
+			"current": 4,
 			"list": [
 				{
 					"id": 0,
@@ -53,6 +53,12 @@
 					"name": "定制文字",
 					"pathName": "customized/pages/made/madeFont/madeFont",
 					"query": ""
+				},
+				{
+					"id": 4,
+					"name": "合成",
+					"pathName": "customized/pages/made/combination/combination",
+					"query": ""
 				}
 			]
 		}

readme.md

@@ -5,4 +5,7 @@
 
 ### https://blog.csdn.net/qq_37942845/article/details/80169907
 
-http://www.php.cn/xiaochengxu-389003.html
+http://www.php.cn/xiaochengxu-389003.html
+### canvas 需要实现截图
+生成图片后在合成
+##https://blog.csdn.net/mossbaoo/article/details/85073105