微信小程序远程图片转本地临时图片解决方案

发表于 更新于 分类于

前言

微信小程序里有些时候只能使用本地临时图片而不能用远程图片（如：2.3.0以下的Map组件内的markers的图片）

备注: 低于2.3.0版本时做兼容使用，小程序在2.3.0之后makers已经支持远程图片
也适用于需要远程图片转本地临时图片的场景

当然这些都比较少见现在大部分使用远程图片即可解决，这里也只是对远程图片本地临时图片的一个简单探讨

正文

单张图片转换

对于单张远程图片转本地临时图片直接调用小程序提供的wx.getImageInfo接口:

1
2
3
4
5
6
7
8
9
10
11
let url = '远程图片地址'
wx.getImageInfo({
  src: url,
  success: function(res) {
    // res.path - 取得本地临时图片地址
    // do something
  },
  fail: function (err) {
    // do something
  }
})

多张图片转换

要得到多张图片的本地地址，将所有的请求priomise化，然后将所有的promise遍历依次取得本地图片临时数据

将wx.getImageInfo函数Promise化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let localUrls = [] // 得到的临时图片地址数组
function getImgPromisefy (url) {
  return function() {
    return new Promise(function(resolve, reject){
    wx.getImageInfo({
      src: url,
      success: function(res) {
        resolve(res)
        // res.path - 取得本地临时图片地址
        // localUrls.push(res.path) - 将取得的本地临时地址push进数组
      },
      fail: function (err) {
        // reject(err)
        resolve(err) // 此处为了在图片加载失败时 仍可以加载下一张图片
      }
    })
  })}
}
进行多次异步处理得到所有的图片地址
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getMutilIconPath () {
  let urls = [
    '远程图片地址1',
    '远程图片地址2',
    '远程图片地址3'
    // ...
  ]
  let multiPromise = urls.map((item) => {
    return getImgPromisefy(item)
  })
  return multiPromise.reduce(function(cur, next) {
            return cur.then(next)
          }, Promise.resolve()).then(function() {
            // 全部转换完成时的回调函数
            // do something
          })
}

参考: Promise与遍历（循环，无穷多的then）遇到的问题及三个解决方案