index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. // pages/downZS/index.js
  2. import {
  3. ajax,
  4. } from "../../utils/util";
  5. Page({
  6. /**
  7. * 页面的初始数据
  8. */
  9. data: {
  10. ls_url: [],
  11. selectIndex: 0
  12. },
  13. systemInfo: wx.getSystemInfoSync(),
  14. goBack() {
  15. wx.navigateBack();
  16. },
  17. /**
  18. * 生命周期函数--监听页面加载
  19. */
  20. onLoad(options) {
  21. wx.showLoading({
  22. title: '加载中',
  23. mask: true
  24. })
  25. // 获取远程图片
  26. wx.getImageInfo({
  27. src: "https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/6.jpg?" + Date.now(),
  28. }).then((res) => {
  29. wx.hideLoading();
  30. const {
  31. width,
  32. height,
  33. path
  34. } = res;
  35. const canvas = wx.createOffscreenCanvas({
  36. type: '2d',
  37. width,
  38. height
  39. });
  40. const ctx = canvas.getContext('2d');
  41. const img = canvas.createImage();
  42. img.onload = () => {
  43. ajax({
  44. urlType: "apiurl",
  45. api: "/article/list",
  46. }).then(res => {
  47. if (res.code !== 0) return wx.showToast({
  48. title: res.message || '请求失败',
  49. icon: 'none'
  50. })
  51. const li = res.data || [];
  52. for (let i = 0; i < li.length; i++) {
  53. const v = li[i];
  54. ctx.drawImage(img, 0, 0, width, height);
  55. ctx.fillStyle = "#000000";
  56. ctx.font = (width / 20) + 'px 微软雅黑';
  57. ctx.fillText(v.name, width * 0.18, height * 0.4);
  58. wx.canvasToTempFilePath({
  59. x: 0,
  60. y: 0,
  61. width,
  62. height,
  63. destWidth: width,
  64. destHeight: height,
  65. canvas,
  66. fileType: 'jpg',
  67. success: res => {
  68. v.url = res.tempFilePath
  69. if (i === li.length - 1) {
  70. this.setData({
  71. ls_url: li,
  72. });
  73. }
  74. },
  75. complete: () => {
  76. wx.hideLoading();
  77. }
  78. })
  79. }
  80. }).catch(err => {
  81. wx.hideLoading();
  82. })
  83. }
  84. img.onerror = () => wx.hideLoading();
  85. img.src = path // 要加载的图片 url
  86. }).catch(err => {
  87. wx.hideLoading();
  88. });
  89. },
  90. change(e) {
  91. this.setData({
  92. selectIndex: e.detail.current
  93. })
  94. },
  95. download() {
  96. if (!this.data.ls_url[this.data.selectIndex] || !this.data.ls_url[this.data.selectIndex].url) return
  97. wx.saveImageToPhotosAlbum({
  98. filePath: this.data.ls_url[this.data.selectIndex].url, // 使用下载得到的临时文件路径
  99. success: function (saveRes) {
  100. wx.showToast({
  101. title: '已保存至相册',
  102. icon: 'success',
  103. duration: 2000
  104. });
  105. },
  106. fail: function (err) {
  107. if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
  108. wx.showModal({
  109. title: '保存失败',
  110. content: '请前往设置页面授权保存图片到相册',
  111. showCancel: false,
  112. success: function (modalRes) {
  113. wx.openSetting({
  114. withSubscriptions: true,
  115. success: function (res) {
  116. if (res.authSetting['scope.writePhotosAlbum']) {
  117. // 用户重新授权后,再次尝试保存图片
  118. wx.saveImageToPhotosAlbum({
  119. filePath: res.tempFilePath,
  120. success: function (saveRes) {
  121. wx.showToast({
  122. title: '保存成功',
  123. icon: 'success',
  124. duration: 2000
  125. });
  126. },
  127. fail: function (err) {
  128. wx.showToast({
  129. title: '保存失败',
  130. icon: 'none',
  131. duration: 2000
  132. });
  133. }
  134. });
  135. }
  136. },
  137. fail: function (err) {
  138. wx.showToast({
  139. title: '打开设置页面失败',
  140. icon: 'none',
  141. duration: 2000
  142. });
  143. }
  144. });
  145. }
  146. });
  147. } else {
  148. wx.showToast({
  149. title: '保存失败',
  150. icon: 'none',
  151. duration: 2000
  152. });
  153. }
  154. }
  155. });
  156. },
  157. /**
  158. * 生命周期函数--监听页面初次渲染完成
  159. */
  160. onReady() {
  161. },
  162. /**
  163. * 生命周期函数--监听页面显示
  164. */
  165. onShow() {
  166. },
  167. /**
  168. * 生命周期函数--监听页面隐藏
  169. */
  170. onHide() {
  171. },
  172. /**
  173. * 生命周期函数--监听页面卸载
  174. */
  175. onUnload() {
  176. },
  177. /**
  178. * 页面相关事件处理函数--监听用户下拉动作
  179. */
  180. onPullDownRefresh() {
  181. },
  182. /**
  183. * 页面上拉触底事件的处理函数
  184. */
  185. onReachBottom() {
  186. },
  187. /**
  188. * 用户点击右上角分享
  189. */
  190. onShareAppMessage() {
  191. return {
  192. title: __wxConfig.accountInfo.nickname,
  193. path: "/pages/index/index"
  194. }
  195. }
  196. })