前言
微信小程序里有些时候只能使用本地临时图片而不能用远程图片(如:2.3.0以下的Map组件内的markers的图片)
备注: 低于2.3.0版本时做兼容使用,小程序在2.3.0之后makers已经支持远程图片
也适用于需要远程图片转本地临时图片的场景
当然这些都比较少见现在大部分使用远程图片即可解决,这里也只是对远程图片本地临时图片的一个简单探讨
正文
单张图片转换
对于单张远程图片转本地临时图片直接调用小程序提供的wx.getImageInfo
接口:
let url = '远程图片地址'
wx.getImageInfo({
src: url,
success: function(res) {
// res.path - 取得本地临时图片地址
// do something
},
fail: function (err) {
// do something
}
})
多张图片转换
要得到多张图片的本地地址,将所有的请求priomise
化,然后将所有的promise
遍历依次取得本地图片临时数据
将wx.getImageInfo函数Promise化
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) // 此处为了在图片加载失败时 仍可以加载下一张图片
}
})
})}
}
进行多次异步处理得到所有的图片地址
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
})
}
评论区