// 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)
}
})
}
})