|
@@ -1,430 +0,0 @@
|
|
|
-// 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)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
-})
|