combination.js 6.7 KB

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