// 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: "", }, /** * 生命周期函数--监听页面加载 */ 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") 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, }, 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) } }) }, })