boxComb.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. // customized/pages/made/combination/combination.js
  2. import * as util from '../../../../utils/util.js'
  3. let app = getApp();
  4. let host = app.globalData.servsers; // 请求的url
  5. Page({
  6. /**
  7. * 页面的初始数据
  8. */
  9. data: {
  10. dataPositionObj: { //正面数据
  11. top: 184,
  12. left: 305,
  13. width: 218,
  14. height: 218,
  15. },
  16. imgTouch: {
  17. isActive: "1",
  18. src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
  19. x: -82,
  20. y: 17,
  21. clientX: 195,
  22. clientY: 121,
  23. width: 517,
  24. height: 208.17866666666666,
  25. scale: 2.4834437086092715,
  26. angle: 27
  27. },
  28. fontTouch: {
  29. isActive: "1",
  30. fontContent: "Gg",
  31. isColor: "#ffffff",
  32. x: 10,
  33. y: 10,
  34. angle: 0,
  35. fontSize: 100,
  36. clientX: 0,
  37. clientY: 0,
  38. width: 138.34375,
  39. height: 132
  40. },
  41. rpx: 1,
  42. 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', '/customized/images/customized/box_white_big_1.png', '/customized/images/customized/box_white_big_2.png'],
  43. // obverseImgObject: {
  44. // '1': ,
  45. // /*正面 */
  46. // '2': '/customized/images/customized/cup_black_side.png',
  47. // /*侧面面 */
  48. // '3': '/customized/images/customized/cup_black_handle.png',
  49. // /*手柄 */
  50. // '4': '/customized/images/customized/cup_black_bottom.png',
  51. // /*底部 */
  52. // },
  53. imgSrcArray: [],
  54. buildSrcArrayText:{
  55. '1':'正面',
  56. '2':'背面',
  57. },
  58. boxImg:{
  59. '5': '/customized/images/customized/box_white_big_1_out.png',
  60. '6': '/customized/images/customized/box_white_big_2_out.png',
  61. },
  62. buildSrcArray: [],
  63. customGoodsImg:"",
  64. },
  65. /**
  66. * 生命周期函数--监听页面加载
  67. */
  68. onLoad: function (options) {
  69. },
  70. /**
  71. * 生命周期函数--监听页面初次渲染完成
  72. */
  73. onReady: function () {
  74. wx.showLoading({
  75. title: '图片合成中...'
  76. })
  77. let that = this, result = true;
  78. if (wx.getStorageSync('madeCupImgData5') || wx.getStorageSync('madeCupFontData5')) {
  79. that.getCombImg(that, 5);
  80. result = false
  81. } else if (wx.getStorageSync('madeCupImgData6') || wx.getStorageSync('madeCupFontData6')) {
  82. that.getCombImg(that, 6);
  83. result = false
  84. }
  85. if (result) {
  86. wx.hideLoading();
  87. }
  88. },
  89. /**
  90. * 生命周期函数--监听页面显示
  91. */
  92. onShow: function () {
  93. },
  94. /**
  95. * 生命周期函数--监听页面隐藏
  96. */
  97. onHide: function () {
  98. },
  99. /**
  100. * 生命周期函数--监听页面卸载
  101. */
  102. onUnload: function () {
  103. },
  104. /**
  105. * 页面相关事件处理函数--监听用户下拉动作
  106. */
  107. onPullDownRefresh: function () {
  108. },
  109. /**
  110. * 页面上拉触底事件的处理函数
  111. */
  112. onReachBottom: function () {
  113. },
  114. /**
  115. * 用户点击右上角分享
  116. */
  117. onShareAppMessage: function () {
  118. },
  119. getCombImg(that,i) {
  120. let imgTouch = null, dataPositionObj=null;
  121. that.setData({ // imgSrcArray 初始化
  122. imgSrcArray:[],
  123. })
  124. console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
  125. if(wx.getStorageSync('madeCupImgData' + i)){
  126. imgTouch = wx.getStorageSync('madeCupImgData'+i);
  127. dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  128. console.log(dataPositionObj,"dataPositionObj")
  129. wx.getSystemInfo({
  130. success: function (res) {
  131. let rpx = res.windowWidth / 750;
  132. that.setData({
  133. rpx: rpx
  134. });
  135. wx.downloadFile({
  136. url: imgTouch.src, // 仅为示例,并非真实的资源
  137. success(res) {
  138. // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
  139. console.log(res)
  140. if (res.statusCode === 200) {
  141. // canvas截图区域与图片的宽度比例
  142. let dWidth = dataPositionObj.width / imgTouch.width;
  143. // canvas截图区域与图片的高度比例
  144. let dHeight = dataPositionObj.height / imgTouch.height;
  145. const ctx = wx.createCanvasContext('comb-img'+i);
  146. //画布中点坐标转移到图片中心
  147. let movex = imgTouch.x + imgTouch.width * rpx / 2;
  148. let movey = imgTouch.y + imgTouch.height * rpx / 2;
  149. ctx.translate(movex, movey);
  150. ctx.rotate(imgTouch.angle * Math.PI / 180);
  151. ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
  152. ctx.draw(false,function () {
  153. wx.canvasToTempFilePath({
  154. canvasId: 'comb-img'+i,
  155. success: function (res) {
  156. console.log(res)
  157. let imgArray = that.data.imgSrcArray;
  158. imgArray.push(res.tempFilePath)
  159. that.setData({
  160. imgSrcArray: imgArray
  161. })
  162. that.getCombFont(that,i,true);
  163. }
  164. }, that)
  165. })
  166. }
  167. }
  168. })
  169. },
  170. })
  171. } else {
  172. that.getCombFont(that,i,false);
  173. }
  174. },
  175. getCombFont(that,i,_static) {
  176. let fontTouch = null, dataPositionObj = null, simulationFont=null;
  177. if (wx.getStorageSync('madeCupFontData' + i)) {
  178. fontTouch = wx.getStorageSync('madeCupFontData' + i);
  179. simulationFont = wx.getStorageSync('simulationFont' + i);
  180. dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  181. const ctx = wx.createCanvasContext('comb-font'+i);
  182. // ctx.textBaseline = 'top';
  183. ctx.setFontSize(fontTouch.fontSize);
  184. ctx.setFillStyle(fontTouch.isColor);
  185. if(fontTouch.bold){
  186. ctx.fillText(fontTouch.fontContent, -1, simulationFont.height / 5 * 4)
  187. ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 -1)
  188. }
  189. ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4)
  190. if (fontTouch.bold) {
  191. ctx.fillText(fontTouch.fontContent, 1, simulationFont.height / 5 * 4)
  192. ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 + 1)
  193. }
  194. ctx.restore()
  195. ctx.draw(false,function () {
  196. wx.canvasToTempFilePath({
  197. canvasId: 'comb-font'+i,
  198. success: function (res) {
  199. console.log(res)
  200. that.getCombFontImg(that, res.tempFilePath, fontTouch,i)
  201. }
  202. }, that)
  203. })
  204. } else {
  205. that.getComb(that, that.data.imgSrcArray, i, _static)
  206. }
  207. },
  208. getCombFontImg(that, img, fontTouch,i){ // 生产字体图片后在进行处理一次
  209. wx.getSystemInfo({
  210. success: function (res) {
  211. let rpx = res.windowWidth / 750;
  212. that.setData({
  213. rpx: rpx
  214. });
  215. // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
  216. console.log(res)
  217. // canvas截图区域与图片的宽度比例
  218. const ctx = wx.createCanvasContext('comb-font' + i + '-2');
  219. //画布中点坐标转移到图片中心
  220. let movex = fontTouch.x + 536 * rpx / 2;
  221. let movey = fontTouch.y + 712 * rpx / 2;
  222. ctx.translate(movex, movey);
  223. ctx.rotate(fontTouch.angle * Math.PI / 180);
  224. ctx.drawImage(img, -536 * rpx / 2, -712 * rpx / 2, 536 * rpx, 712 * rpx)
  225. ctx.draw(false, function () {
  226. wx.canvasToTempFilePath({
  227. canvasId: 'comb-font' + i + '-2',
  228. success: function (res) {
  229. console.log(res)
  230. let imgArray = that.data.imgSrcArray;
  231. imgArray.push(res.tempFilePath)
  232. that.setData({
  233. imgSrcArray: imgArray
  234. })
  235. that.getComb(that, that.data.imgSrcArray,i,true)
  236. }
  237. }, that)
  238. })
  239. },
  240. })
  241. },
  242. getComb(that, imgSrcArray,i,_static) {
  243. console.log(imgSrcArray,"imgSrcArray")
  244. if(_static){
  245. let imgTouch = wx.getStorageSync('madeCupImgData' + i);
  246. let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  247. let canvasBg = that.data.obverseImgObject[i];
  248. console.log(canvasBg)
  249. wx.getSystemInfo({
  250. success: function (res) {
  251. let rpx = res.windowWidth / 750;
  252. that.setData({
  253. rpx: rpx
  254. });
  255. const ctx = wx.createCanvasContext('comb-canvas' + i);
  256. ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 800 * rpx);
  257. // 设置背景
  258. ctx.draw(true)
  259. imgSrcArray.forEach((res) => {
  260. ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
  261. })
  262. console.log('开始执行叠加')
  263. ctx.drawImage(that.data.boxImg[i], 0, 0, 750 * rpx, 800 * rpx)
  264. ctx.draw(true, function () {
  265. wx.canvasToTempFilePath({
  266. canvasId: 'comb-canvas' + i,
  267. success: function (res) {
  268. that.uploadFile(res.tempFilePath,that,function(data){
  269. console.log(res, "合成成功");
  270. let buildSrcArray = that.data.buildSrcArray;
  271. buildSrcArray.push({
  272. src: res.tempFilePath,
  273. isActive: i,
  274. });
  275. console.log(buildSrcArray, "buildSrcArray")
  276. that.setData({
  277. buildSrcArray: buildSrcArray,
  278. })
  279. console.log(that.data.buildSrcArray, "buildSrcArray")
  280. if (i < 7) {
  281. i = i + 1
  282. that.getCombImg(that, i);
  283. } else {
  284. wx.hideLoading()
  285. }
  286. })
  287. },
  288. fail: function (err) {
  289. console.log(err, "合成失败")
  290. wx.hideLoading();
  291. }
  292. }, that)
  293. })
  294. },
  295. })
  296. } else {
  297. if (i < 4) {
  298. i = i + 1
  299. that.getCombImg(that, i);
  300. } else {
  301. wx.hideLoading()
  302. }
  303. }
  304. },
  305. addImgRouter(){ // add car
  306. let that = this;
  307. console.log(that.data.customGoodsImg,"that.data.customGoodsImg")
  308. wx.request({
  309. url: host + '/addShopCar',
  310. method:'post',
  311. header: {
  312. 'content-type': 'application/x-www-form-urlencoded'
  313. },
  314. data:{
  315. customGoodsImg: that.data.customGoodsImg.substring(0, that.data.customGoodsImg.length-1),
  316. customGoodsName:'奶缸-黑色 350ml',
  317. customGoodsNum: 1,
  318. userId: app.globalData.user_id,
  319. },
  320. success:function(res){
  321. console.log(res,"加入购物车")
  322. if(res.data ==='success'){
  323. wx.showModal({
  324. title: '提示',
  325. content: '加入购物车成功,是否去购物车结算商品?',
  326. success:function(res){
  327. if (res.confirm) {
  328. console.log('用户点击确定')
  329. wx.redirectTo({
  330. url: '/customized/pages/car/car',
  331. })
  332. } else if (res.cancel) {
  333. console.log('用户点击取消')
  334. }
  335. }
  336. })
  337. }
  338. }
  339. })
  340. },
  341. uploadFile(path,that,cb){
  342. let customGoodsImg = that.data.customGoodsImg;
  343. wx.uploadFile({
  344. url: host + 'fileUpload',
  345. filePath: path,
  346. name: 'file',
  347. formData: {
  348. file: path,
  349. userId: app.globalData.user_id,
  350. imgStatus: 1,// 表示合成
  351. },
  352. success: function (res) {
  353. console.log(res, "rrrr");
  354. customGoodsImg += res.data+',';
  355. that.setData({
  356. customGoodsImg: customGoodsImg
  357. })
  358. cb(true)
  359. },
  360. fail: function (res) {
  361. cb(false)
  362. }
  363. })
  364. },
  365. })