share.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. // compontents/share/share.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. * 分享弹窗 没怎么用
  6. */
  7. properties: {
  8. },
  9. /**
  10. * 组件的初始数据
  11. */
  12. data: {
  13. flag: true,
  14. postId: '',
  15. imgUrl: [],
  16. featureMap: {},
  17. title: '',
  18. ratio: ''
  19. },
  20. /**
  21. * 组件的方法列表
  22. */
  23. methods: {
  24. //隐藏分享框
  25. hidePopup: function () {
  26. this.setData({
  27. flag: !this.data.flag
  28. })
  29. },
  30. //展示分享框
  31. showPopup (postId, imgUrl, featureMap, title, ratio) {
  32. this.setData({
  33. flag: !this.data.flag,
  34. postId,
  35. imgUrl,
  36. featureMap,
  37. title,
  38. ratio
  39. })
  40. },
  41. //保存图片
  42. saveImage (e) {
  43. const imgUrl = this.data.imgUrl;
  44. const ratio = this.data.ratio;
  45. const featureMap = this.data.featureMap;
  46. const title = this.data.title;
  47. //获取屏幕宽度
  48. const windowWidth = wx.getSystemInfoSync().windowWidth;
  49. //获取图片高度
  50. const imgHeight = windowWidth*ratio;
  51. //先绘制图片
  52. for (let item of imgUrl) {
  53. // wx.downloadFile({
  54. // url: item,
  55. // success: function (res) {
  56. // console.log(res);
  57. // }
  58. // })
  59. //canvas绘制文字和图片
  60. const ctx = wx.createCanvasContext('myCanvas');
  61. var imgPath = item;
  62. ctx.setFillStyle('white')
  63. ctx.fillRect(0, 0, windowWidth, imgHeight + 300)
  64. //绘制用户上传的图片
  65. ctx.drawImage(imgPath, 0, 0, windowWidth, imgHeight);
  66. //绘制用户发表的内容和名字
  67. ctx.setFontSize(16)
  68. ctx.setFillStyle('black')
  69. ctx.fillText(title, 135, imgHeight + 55)
  70. ctx.setFontSize(18)
  71. ctx.fillText(featureMap.wechatName, 135, imgHeight + 35);
  72. //横线
  73. ctx.moveTo(20, imgHeight + 140)
  74. ctx.lineTo(windowWidth - 40, imgHeight + 140)
  75. ctx.stroke()
  76. //绘制用户头像圆形切割-开始
  77. ctx.save();
  78. ctx.beginPath();
  79. ctx.arc(70, imgHeight + 70, 50, 0, Math.PI * 2, false);
  80. ctx.fill();
  81. ctx.clip();
  82. //圆形切割-结束
  83. ctx.drawImage(featureMap.headImgUrl, 20, imgHeight + 20, 100, 100);
  84. ctx.restore();
  85. //二维码和文字
  86. ctx.setFontSize(16)
  87. ctx.setFillStyle('black')
  88. ctx.fillText('长按二维码', 50, imgHeight + 180)
  89. ctx.fillText('进入小程序查看更多', 50, imgHeight + 210)
  90. ctx.draw()
  91. }
  92. setTimeout(() => {
  93. this.canvasToImage()
  94. }, 200)
  95. },
  96. canvasToImage () {
  97. let that = this;
  98. //canvas生成图片
  99. wx.canvasToTempFilePath({
  100. x: 0,
  101. y: 0,
  102. width: that.windowWidth,
  103. height: that.imgHeight + 300,
  104. destWidth: that.windowWidth,
  105. destHeight: that.imgHeight + 300,
  106. canvasId: 'myCanvas',
  107. success: (res) => {
  108. console.log(res.tempFilePath);
  109. //保存图片到本地
  110. wx.saveImageToPhotosAlbum({
  111. filePath: res.tempFilePath,
  112. success(res) {
  113. wx.showModal({
  114. title: '存图成功',
  115. content: '图片成功保存到相册了,去发朋友圈',
  116. showCancel:false,
  117. confirmText:'我知道了',
  118. confirmColor:'#72B9C3',
  119. success: function(res) {
  120. if (res.confirm) {
  121. console.log('用户点击确定');
  122. }
  123. //that.hideShareImg()
  124. }
  125. })
  126. }
  127. })
  128. },
  129. fail:function (res) {
  130. console.log(res)
  131. }
  132. })
  133. }
  134. }
  135. })