// 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 }, isActive:null, rpx: 1, obverseImgObject: {}, //素材背景 imgSrcArray: [], buildSrcArray: [], customGoodsImg: "", }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { if ('id' in options){ this.setData({ isActive: options.id,//素材id obverseImgObject: util.changeImg,//素材 dataPositionObj: util.changeCup(options.id.toString()).dataPositionObj }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { wx.showLoading({ title: '图片合成中...' }) let that = this, result = true; if (wx.getStorageSync('madeImgData' + that.data.isActive) || wx.getStorageSync('madeFontData'+ that.data.isActive)) { that.getCombImg(that, that.data.isActive); 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 = that.data.dataPositionObj; that.setData({ // imgSrcArray 初始化 imgSrcArray: [], }) if (wx.getStorageSync('madeImgData' + i)) { imgTouch = wx.getStorageSync('madeImgData' + i); 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(false, 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, i, true); } }, that) }) } } }) }, }) } else { that.getCombFont(that, i, false); } }, getCombFont(that, i, _static) { let fontTouch = null, dataPositionObj = that.data.dataPositionObj, simulationFont = null; if (wx.getStorageSync('madeFontData' + i)) { fontTouch = wx.getStorageSync('madeFontData' + i); simulationFont = wx.getStorageSync('simulationFont' + i); const ctx = wx.createCanvasContext('comb-font'); // 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', success: function (res) { that.getCombFontImg(that, res.tempFilePath, fontTouch, i) } }, that) }) } else { that.getComb(that, that.data.imgSrcArray, i) } }, 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-1'); //画布中点坐标转移到图片中心 let movex = fontTouch.x + that.data.dataPositionObj.width * rpx / 2; let movey = fontTouch.y + that.data.dataPositionObj.height * rpx / 2; ctx.translate(movex, movey); ctx.rotate(fontTouch.angle * Math.PI / 180); ctx.drawImage(img, -that.data.dataPositionObj.width * rpx / 2, -that.data.dataPositionObj.height * rpx / 2, that.data.dataPositionObj.width * rpx, that.data.dataPositionObj.height * rpx) ctx.draw(false, function () { wx.canvasToTempFilePath({ canvasId: 'comb-font-1', 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) { console.log(imgSrcArray, "imgSrcArray") let imgTouch = wx.getStorageSync('madeImgData' + i); let dataPositionObj = that.data.dataPositionObj; wx.downloadFile({ url: that.data.obverseImgObject[i + '_2'], success(res){ if (res.statusCode === 200) { let canvasBg = res.tempFilePath;//获取背景没有线框的 console.log(canvasBg,"canvasBgcanvasBg") wx.getSystemInfo({ success: function (res) { let rpx = res.windowWidth / 750; that.setData({ rpx: rpx }); const ctx = wx.createCanvasContext('comb-canvas'); 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 + '_1'], success(file){ if (file.statusCode === 200) { ctx.drawImage(file.tempFilePath, 0, 0, 750 * rpx, 800 * rpx) ctx.draw(true, function () { console.log("开始合成") wx.canvasToTempFilePath({ canvasId: 'comb-canvas', success: function (res) { console.log(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") 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(); } } }) }, 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) } }) }, })