index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. // pages/downZS/index.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. ls_url: ""
  8. },
  9. systemInfo: wx.getSystemInfoSync(),
  10. /**
  11. * 生命周期函数--监听页面加载
  12. */
  13. onLoad(options) {
  14. // 获取远程图片
  15. wx.getImageInfo({
  16. 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",
  17. }).then((res) => {
  18. const {
  19. width,
  20. height,
  21. path
  22. } = res;
  23. const canvas = wx.createOffscreenCanvas({
  24. type: '2d',
  25. width,
  26. height
  27. });
  28. const ctx = canvas.getContext('2d');
  29. const img = canvas.createImage();
  30. img.onload = () => {
  31. ctx.drawImage(img, 0, 0, width, height);
  32. ctx.fillStyle = "#91725D";
  33. ctx.font = (width / 20) + 'px 微软雅黑';
  34. ctx.fillText("李勇利", width * 0.33, height * 0.4);
  35. wx.canvasToTempFilePath({
  36. x: 0,
  37. y: 0,
  38. width,
  39. height,
  40. destWidth: width,
  41. destHeight: height,
  42. canvas,
  43. fileType: 'jpg',
  44. success: res => {
  45. this.setData({
  46. ls_url: res.tempFilePath,
  47. width,
  48. height
  49. });
  50. }
  51. })
  52. }
  53. img.src = path // 要加载的图片 url
  54. });
  55. },
  56. download() {
  57. if (!this.data.ls_url) return
  58. wx.saveImageToPhotosAlbum({
  59. filePath: this.data.ls_url, // 使用下载得到的临时文件路径
  60. success: function (saveRes) {
  61. wx.showToast({
  62. title: '已保存至相册',
  63. icon: 'success',
  64. duration: 2000
  65. });
  66. },
  67. fail: function (err) {
  68. if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
  69. wx.showModal({
  70. title: '保存失败',
  71. content: '请前往设置页面授权保存图片到相册',
  72. showCancel: false,
  73. success: function (modalRes) {
  74. wx.openSetting({
  75. withSubscriptions: true,
  76. success: function (res) {
  77. if (res.authSetting['scope.writePhotosAlbum']) {
  78. // 用户重新授权后,再次尝试保存图片
  79. wx.saveImageToPhotosAlbum({
  80. filePath: res.tempFilePath,
  81. success: function (saveRes) {
  82. wx.showToast({
  83. title: '保存成功',
  84. icon: 'success',
  85. duration: 2000
  86. });
  87. },
  88. fail: function (err) {
  89. wx.showToast({
  90. title: '保存失败',
  91. icon: 'none',
  92. duration: 2000
  93. });
  94. }
  95. });
  96. }
  97. },
  98. fail: function (err) {
  99. wx.showToast({
  100. title: '打开设置页面失败',
  101. icon: 'none',
  102. duration: 2000
  103. });
  104. }
  105. });
  106. }
  107. });
  108. } else {
  109. wx.showToast({
  110. title: '保存失败',
  111. icon: 'none',
  112. duration: 2000
  113. });
  114. }
  115. }
  116. });
  117. },
  118. /**
  119. * 生命周期函数--监听页面初次渲染完成
  120. */
  121. onReady() {
  122. },
  123. /**
  124. * 生命周期函数--监听页面显示
  125. */
  126. onShow() {
  127. },
  128. /**
  129. * 生命周期函数--监听页面隐藏
  130. */
  131. onHide() {
  132. },
  133. /**
  134. * 生命周期函数--监听页面卸载
  135. */
  136. onUnload() {
  137. },
  138. /**
  139. * 页面相关事件处理函数--监听用户下拉动作
  140. */
  141. onPullDownRefresh() {
  142. },
  143. /**
  144. * 页面上拉触底事件的处理函数
  145. */
  146. onReachBottom() {
  147. },
  148. /**
  149. * 用户点击右上角分享
  150. */
  151. onShareAppMessage() {
  152. }
  153. })