微信小程序保存多张图片的实现方法

讲解“微信小程序保存多张图片的实现方法”的攻略如下：

一、保存单张图片

在微信小程序中，保存单张图片需要借助wx.getImageInfo接口获取图片信息和wx.saveImageToPhotosAlbum接口保存图片到相册。

步骤如下：

1. 获取图片信息：使用wx.getImageInfo接口获取图片信息，包括图片的本地路径和宽高等信息。

javascript
wx.getImageInfo({
src: 'https://example.com/images/test.jpg',
success(res) {
console.log('图片信息：', res)
}
})

1. 保存图片到相册：使用wx.saveImageToPhotosAlbum接口将图片保存到用户的相册中。

javascript
wx.saveImageToPhotosAlbum({
filePath: res.path,
success() {
console.log('图片保存成功')
}
})

注意，需要先向用户获取保存图片的权限。可以在页面的onLoad生命周期中调用wx.getSetting接口获取用户的授权情况。

wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.writePhotosAlbum']) {
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
          console.log('用户允许保存图片到相册')
        }
      })
    }
  }
})

二、保存多张图片

保存多张图片需要将以上的步骤嵌套到循环中，依次保存每一张图片。

示例1：通过Promise.all异步并发保存图片

// 图片路径数组
const imgList = [
  'https://example.com/images/test1.jpg',
  'https://example.com/images/test2.jpg',
  'https://example.com/images/test3.jpg'
]

// 将图片保存到相册
function saveImageToPhotosAlbum(filepath) {
  return new Promise((resolve, reject) => {
    wx.saveImageToPhotosAlbum({
      filePath: filepath,
      success() {
        resolve()
      },
      fail() {
        reject()
      }
    })
  })
}

// 保存图片流程
Promise.all(imgList.map((item) => {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: item,
      success(res) {
        saveImageToPhotosAlbum(res.path).then(() => {
          resolve()
        }).catch(() => {
          reject()
        })
      },
      fail() {
        reject()
      }
    })
  })
})).then(() => {
  console.log('图片保存成功')
}).catch(() => {
  console.log('图片保存失败')
})

示例2：通过递归方式顺序保存图片，避免同时保存大量图片导致卡顿或崩溃

// 图片路径数组
const imgList = [
  'https://example.com/images/test1.jpg',
  'https://example.com/images/test2.jpg',
  'https://example.com/images/test3.jpg'
]

// 将图片保存到相册
function saveImageToPhotosAlbum(filepath) {
  return new Promise((resolve, reject) => {
    wx.saveImageToPhotosAlbum({
      filePath: filepath,
      success() {
        resolve()
      },
      fail() {
        reject()
      }
    })
  })
}

// 保存图片的递归函数
function saveImageRecursive(index = 0) {
  wx.getImageInfo({
    src: imgList[index],
    success(res) {
      saveImageToPhotosAlbum(res.path).then(() => {
        if (index + 1 < imgList.length) {
          saveImageRecursive(index + 1)
        } else {
          console.log('图片保存成功')
        }
      }).catch(() => {
        console.log('图片保存失败')
      })
    }
  })
}

// 开始保存图片
saveImageRecursive()

以上就是“微信小程序保存多张图片的实现方法”的完整攻略。