// customized/pages/made/combination/combination.js import * as util from '../../../../utils/util.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:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'], // obverseImgObject: { // '1': , // /*正面 */ // '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: [], buildSrcArray: [], }, /** * 生命周期函数--监听页面加载 */ 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); wx.showLoading({ title: '图片合成中...' }) let that = this; // for (let i = 1; i <= 4; i++) { // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) { // console.log(i, "iiiii") // that.getCombImg(that, i); // } // } if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) { that.getCombImg(that, 1); } else if(wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) { that.getCombImg(that, 2); } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) { that.getCombImg(that, 3); } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) { that.getCombImg(that, 4); } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, getCombImg(that,i) { 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,"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'+i); //画布中点坐标转移到图片中心 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'+i, success: function (res) { console.log(res) let imgArray = that.data.imgSrcArray; imgArray.push(res.tempFilePath) that.setData({ imgSrcArray: imgArray }) that.getCombFont(that,i,true); } }, that) }) } } }) }, }) } else { that.getCombFont(that,i,false); } }, getCombFont(that,i,_static) { let fontTouch = null,dataPositionObj = null; if (wx.getStorageSync('madeCupFontData' + i)) { fontTouch = wx.getStorageSync('madeCupFontData' + i); dataPositionObj = util.changeCup(i.toString()).dataPositionObj; const ctx = wx.createCanvasContext('comb-font'+i); ctx.setFontSize(fontTouch.fontSize); ctx.setFillStyle(fontTouch.isColor); // ctx.translate(0, fontTouch.height / 5 * 4); // ctx.save(); 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.translate(-movex, -movey); // ctx.rotate(fontTouch.angle * Math.PI / 180); // ctx.fillText(fontTouch.fontContent, 0, 0); // ctx.translate(fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4); ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y +fontTouch.height / 5 * 4); ctx.draw(false,function () { wx.canvasToTempFilePath({ canvasId: 'comb-font'+i, 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,i,true) } }, that) }) } else { that.getComb(that, that.data.imgSrcArray, i, _static) } }, getComb(that, imgSrcArray,i,_static) { if(_static){ let imgTouch = wx.getStorageSync('madeCupImgData' + i); let dataPositionObj = util.changeCup(i.toString()).dataPositionObj; let canvasBg = that.data.obverseImgObject[i]; console.log(canvasBg) wx.getSystemInfo({ success: function (res) { let rpx = res.windowWidth / 750; that.setData({ rpx: rpx }); const ctx = wx.createCanvasContext('comb-canvas' + i); 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); }) wx.hideLoading(); ctx.draw(true, function () { wx.canvasToTempFilePath({ canvasId: 'comb-canvas' + i, success: function (res) { console.log(res, "合成成功"); let buildSrcArray = that.data.buildSrcArray; buildSrcArray.push(res.tempFilePath); console.log(buildSrcArray, "buildSrcArray") that.setData({ buildSrcArray: buildSrcArray }) console.log(that.data.buildSrcArray, "buildSrcArray") if (i < 4) { i = i + 1 that.getCombImg(that, i); } else { wx.hideLoading() } }, fail: function (err) { console.log(err, "合成失败") wx.hideLoading(); } }, that) }) }, }) } else { wx.hideLoading() } } })