shuhuadasai2024/pages/downZS/index.js

// pages/downZS/index.js
import {
  ajax,
} from "../../utils/util";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ls_url: [],
    selectIndex: 0
  },
  systemInfo: wx.getSystemInfoSync(),


  goBack() {
    wx.navigateBack();
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.showLoading({
      title: '加载中',
      mask: true
    })

    // 获取远程图片
    wx.getImageInfo({
      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(),
    }).then((res) => {
      wx.hideLoading();
      const {
        width,
        height,
        path
      } = res;
      const canvas = wx.createOffscreenCanvas({
        type: '2d',
        width,
        height
      });
      const ctx = canvas.getContext('2d');
      const img = canvas.createImage();
      img.onload = () => {
        ajax({
          urlType: "apiurl",
          api: "/article/list",
        }).then(res => {
          if (res.code !== 0) return wx.showToast({
            title: res.message || '请求失败',
            icon: 'none'
          })
          const li = res.data || [];
          console.log(li)
          for (let i = 0; i < li.length; i++) {
            const v = li[i];
            ctx.drawImage(img, 0, 0, width, height);
            ctx.fillStyle = "#000000";
            ctx.font = (width / 20) + 'px 微软雅黑';
            ctx.fillText(v.name, width * 0.18, height * 0.4);
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width,
              height,
              destWidth: width,
              destHeight: height,
              canvas,
              fileType: 'jpg',
              success: res => {
                v.url = res.tempFilePath
                if (i === li.length - 1) {
                  this.setData({
                    ls_url: li,
                  });
                }
              },
              complete: () => {
                wx.hideLoading();
              }
            })
          }
        }).catch(err => {
          wx.hideLoading();
        })
      }
      img.onerror = () => wx.hideLoading();
      img.src = path // 要加载的图片 url
    }).catch(err => {
      wx.hideLoading();
    });
  },
  change(e) {
    this.setData({
      selectIndex: e.detail.current
    })
  },
  download() {
    if (!this.data.ls_url[this.data.selectIndex] || !this.data.ls_url[this.data.selectIndex].url) return
    wx.saveImageToPhotosAlbum({
      filePath: this.data.ls_url[this.data.selectIndex].url, // 使用下载得到的临时文件路径  
      success: function (saveRes) {
        wx.showToast({
          title: '已保存至相册',
          icon: 'success',
          duration: 2000
        });
      },
      fail: function (err) {
        if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
          wx.showModal({
            title: '保存失败',
            content: '请前往设置页面授权保存图片到相册',
            showCancel: false,
            success: function (modalRes) {
              wx.openSetting({
                withSubscriptions: true,
                success: function (res) {
                  if (res.authSetting['scope.writePhotosAlbum']) {
                    // 用户重新授权后，再次尝试保存图片  
                    wx.saveImageToPhotosAlbum({
                      filePath: res.tempFilePath,
                      success: function (saveRes) {
                        wx.showToast({
                          title: '保存成功',
                          icon: 'success',
                          duration: 2000
                        });
                      },
                      fail: function (err) {
                        wx.showToast({
                          title: '保存失败',
                          icon: 'none',
                          duration: 2000
                        });
                      }
                    });
                  }
                },
                fail: function (err) {
                  wx.showToast({
                    title: '打开设置页面失败',
                    icon: 'none',
                    duration: 2000
                  });
                }
              });
            }
          });
        } else {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000
          });
        }
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return {
      title: __wxConfig.accountInfo.nickname,
      path: "/pages/index/index"
    }
  }
})