// customized/pages/made/combination/combination.js import * as util from '../../../../utils/util.js' let app = getApp(); let host = app.globalData.servsers; // 请求的url Page({ /** * 页面的初始数据 */ data: { dataPositionObj: { //正面数据 top: 184, left: 305, width: 218, height: 218, }, 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: [], buildSrcArrayText:{ '1':'正面', '2':'侧面', '3':'手柄', '4':'底部', }, buildSrcArray: [], customGoodsImg:"", }, /** * 生命周期函数--监听页面加载 */ 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 () { wx.showLoading({ title: '图片合成中...' }) let that = this, result = true; // 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); result = false } else if (wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) { that.getCombImg(that, 2); result = false } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) { that.getCombImg(that, 3); result = false } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) { that.getCombImg(that, 4); result = false } if (result) { wx.hideLoading(); } }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ 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, 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'+i); // 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.font = `'bold' ${fontTouch.fontSize} ${fontTouch.isColor} 'sans-serif'`; // const metrics = ctx.measureText(fontTouch.fontContent) // let movex = fontTouch.x + metrics.width / 2; // let movey = fontTouch.y + simulationFont.height / 2; // ctx.translate(movex, movey); // ctx.rotate(fontTouch.angle * Math.PI / 180); // ctx.fillText(fontTouch.fontContent, -metrics.width / 2, -simulationFont.height / 2 + simulationFont.height / 5 * 4); // ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4) ctx.draw(false,function () { wx.canvasToTempFilePath({ canvasId: 'comb-font'+i, success: function (res) { console.log(res) that.getCombFontImg(that, res.tempFilePath, fontTouch,i) // 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) } }, getCombFontImg(that, img, fontTouch,i){ // 生产字体图片后在进行处理一次 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' + i + '-2'); //画布中点坐标转移到图片中心 let movex = fontTouch.x + 218 * rpx / 2; let movey = fontTouch.y + 218 * rpx / 2; ctx.translate(movex, movey); ctx.rotate(fontTouch.angle * Math.PI / 180); ctx.drawImage(img, -218 * rpx / 2, -218 * rpx / 2, 218 * rpx, 218 * rpx) ctx.draw(false, function () { wx.canvasToTempFilePath({ canvasId: 'comb-font' + i + '-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) } }, that) }) }, }) }, getComb(that, imgSrcArray,i,_static) { console.log(imgSrcArray,"imgSrcArray") 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); }) ctx.draw(true, function () { wx.canvasToTempFilePath({ canvasId: 'comb-canvas' + i, 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(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 { if (i < 4) { i = i + 1 that.getCombImg(that, i); } 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:'奶缸-黑色 350ml', customGoodsNum: 1, userId: app.globalData.user_id, }, 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) } }) } })