comb.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. // customized/pages/made/combination/combination.js
  2. import * as util from '../../../../utils/util.js'
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. dataPositionObj: { //正面数据
  9. top: 156,
  10. left: 286,
  11. width: 270,
  12. height: 270
  13. },
  14. imgTouch: {
  15. isActive: "1",
  16. src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
  17. x: -82,
  18. y: 17,
  19. clientX: 195,
  20. clientY: 121,
  21. width: 517,
  22. height: 208.17866666666666,
  23. scale: 2.4834437086092715,
  24. angle: 27
  25. },
  26. fontTouch: {
  27. isActive: "1",
  28. fontContent: "Gg",
  29. isColor: "#ffffff",
  30. x: 10,
  31. y: 10,
  32. angle: 0,
  33. fontSize: 100,
  34. clientX: 0,
  35. clientY: 0,
  36. width: 138.34375,
  37. height: 132
  38. },
  39. rpx: 1,
  40. 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'],
  41. // obverseImgObject: {
  42. // '1': ,
  43. // /*正面 */
  44. // '2': '/customized/images/customized/cup_black_side.png',
  45. // /*侧面面 */
  46. // '3': '/customized/images/customized/cup_black_handle.png',
  47. // /*手柄 */
  48. // '4': '/customized/images/customized/cup_black_bottom.png',
  49. // /*底部 */
  50. // },
  51. imgSrcArray: [],
  52. buildSrcArray: [],
  53. },
  54. /**
  55. * 生命周期函数--监听页面加载
  56. */
  57. onLoad: function (options) {
  58. // if (wx.getStorageSync('madeCupImgData1')) {
  59. // this.setData({
  60. // imgTouch: wx.getStorageSync('madeCupImgData1')
  61. // })
  62. // }
  63. // if (wx.getStorageSync('madeCupFontData1')) {
  64. // this.setData({
  65. // fontTouch: wx.getStorageSync('madeCupFontData1')
  66. // })
  67. // }
  68. },
  69. /**
  70. * 生命周期函数--监听页面初次渲染完成
  71. */
  72. onReady: function () {
  73. },
  74. /**
  75. * 生命周期函数--监听页面显示
  76. */
  77. onShow: function () {
  78. // this.getCombImg(this);
  79. wx.showLoading({
  80. title: '图片合成中...'
  81. })
  82. let that = this;
  83. // for (let i = 1; i <= 4; i++) {
  84. // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
  85. // console.log(i, "iiiii")
  86. // that.getCombImg(that, i);
  87. // }
  88. // }
  89. if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
  90. that.getCombImg(that, 1);
  91. } else if(wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
  92. that.getCombImg(that, 2);
  93. } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
  94. that.getCombImg(that, 3);
  95. } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
  96. that.getCombImg(that, 4);
  97. }
  98. },
  99. /**
  100. * 生命周期函数--监听页面隐藏
  101. */
  102. onHide: function () {
  103. },
  104. /**
  105. * 生命周期函数--监听页面卸载
  106. */
  107. onUnload: function () {
  108. },
  109. /**
  110. * 页面相关事件处理函数--监听用户下拉动作
  111. */
  112. onPullDownRefresh: function () {
  113. },
  114. /**
  115. * 页面上拉触底事件的处理函数
  116. */
  117. onReachBottom: function () {
  118. },
  119. /**
  120. * 用户点击右上角分享
  121. */
  122. onShareAppMessage: function () {
  123. },
  124. getCombImg(that,i) {
  125. let imgTouch = null, dataPositionObj=null;
  126. that.setData({ // imgSrcArray 初始化
  127. imgSrcArray:[],
  128. })
  129. console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
  130. if(wx.getStorageSync('madeCupImgData' + i)){
  131. imgTouch = wx.getStorageSync('madeCupImgData'+i);
  132. dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  133. console.log(dataPositionObj,"dataPositionObj")
  134. wx.getSystemInfo({
  135. success: function (res) {
  136. let rpx = res.windowWidth / 750;
  137. that.setData({
  138. rpx: rpx
  139. });
  140. wx.downloadFile({
  141. url: imgTouch.src, // 仅为示例,并非真实的资源
  142. success(res) {
  143. // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
  144. console.log(res)
  145. if (res.statusCode === 200) {
  146. // canvas截图区域与图片的宽度比例
  147. let dWidth = dataPositionObj.width / imgTouch.width;
  148. // canvas截图区域与图片的高度比例
  149. let dHeight = dataPositionObj.height / imgTouch.height;
  150. const ctx = wx.createCanvasContext('comb-img'+i);
  151. //画布中点坐标转移到图片中心
  152. let movex = imgTouch.x + imgTouch.width * rpx / 2;
  153. let movey = imgTouch.y + imgTouch.height * rpx / 2;
  154. ctx.translate(movex, movey);
  155. ctx.rotate(imgTouch.angle * Math.PI / 180);
  156. ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
  157. ctx.draw(false,function () {
  158. wx.canvasToTempFilePath({
  159. canvasId: 'comb-img'+i,
  160. success: function (res) {
  161. console.log(res)
  162. let imgArray = that.data.imgSrcArray;
  163. imgArray.push(res.tempFilePath)
  164. that.setData({
  165. imgSrcArray: imgArray
  166. })
  167. that.getCombFont(that,i,true);
  168. }
  169. }, that)
  170. })
  171. }
  172. }
  173. })
  174. },
  175. })
  176. } else {
  177. that.getCombFont(that,i,false);
  178. }
  179. },
  180. getCombFont(that,i,_static) {
  181. let fontTouch = null,dataPositionObj = null;
  182. if (wx.getStorageSync('madeCupFontData' + i)) {
  183. fontTouch = wx.getStorageSync('madeCupFontData' + i);
  184. dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  185. const ctx = wx.createCanvasContext('comb-font'+i);
  186. ctx.setFontSize(fontTouch.fontSize);
  187. ctx.setFillStyle(fontTouch.isColor);
  188. // ctx.translate(0, fontTouch.height / 5 * 4);
  189. // ctx.save();
  190. let movex = fontTouch.width / 2;
  191. let movey = fontTouch.height / 2;
  192. ctx.translate(movex, movey);
  193. ctx.rotate(fontTouch.angle * Math.PI / 180);
  194. ctx.translate(-movex, -movey);
  195. // ctx.rotate(fontTouch.angle * Math.PI / 180);
  196. // ctx.fillText(fontTouch.fontContent, 0, 0);
  197. // ctx.translate(fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
  198. ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y +fontTouch.height / 5 * 4);
  199. ctx.draw(false,function () {
  200. wx.canvasToTempFilePath({
  201. canvasId: 'comb-font'+i,
  202. success: function (res) {
  203. console.log(res)
  204. let imgArray = that.data.imgSrcArray;
  205. imgArray.push(res.tempFilePath)
  206. that.setData({
  207. imgSrcArray: imgArray
  208. })
  209. console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
  210. that.getComb(that, that.data.imgSrcArray,i,true)
  211. }
  212. }, that)
  213. })
  214. } else {
  215. that.getComb(that, that.data.imgSrcArray, i, _static)
  216. }
  217. },
  218. getComb(that, imgSrcArray,i,_static) {
  219. if(_static){
  220. let imgTouch = wx.getStorageSync('madeCupImgData' + i);
  221. let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
  222. let canvasBg = that.data.obverseImgObject[i];
  223. console.log(canvasBg)
  224. wx.getSystemInfo({
  225. success: function (res) {
  226. let rpx = res.windowWidth / 750;
  227. that.setData({
  228. rpx: rpx
  229. });
  230. const ctx = wx.createCanvasContext('comb-canvas' + i);
  231. ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
  232. // 设置背景
  233. ctx.draw(true)
  234. imgSrcArray.forEach((res) => {
  235. ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
  236. })
  237. wx.hideLoading();
  238. ctx.draw(true, function () {
  239. wx.canvasToTempFilePath({
  240. canvasId: 'comb-canvas' + i,
  241. success: function (res) {
  242. console.log(res, "合成成功");
  243. let buildSrcArray = that.data.buildSrcArray;
  244. buildSrcArray.push(res.tempFilePath);
  245. console.log(buildSrcArray, "buildSrcArray")
  246. that.setData({
  247. buildSrcArray: buildSrcArray
  248. })
  249. console.log(that.data.buildSrcArray, "buildSrcArray")
  250. if (i < 4) {
  251. i = i + 1
  252. that.getCombImg(that, i);
  253. } else {
  254. wx.hideLoading()
  255. }
  256. },
  257. fail: function (err) {
  258. console.log(err, "合成失败")
  259. wx.hideLoading();
  260. }
  261. }, that)
  262. })
  263. },
  264. })
  265. } else {
  266. wx.hideLoading()
  267. }
  268. }
  269. })