需求场景:开发企业微信相关功能时,前端上传图片素材最终给到腾讯,腾讯对图片的分辨率有限制(不能超过1440*1080),这就需要前端在上传时做校验
关键在于获取图片的分辨率,废话少说,just code:
/**
* 读取图片文件的宽高分辨率, 异步任务
*@param {String} base64StrOrUrl图片文件的BASE64字符串或者网络图片的url
*@return {Array} 宽高分辨率,数组第一个元素是宽,第二个是高,读取失败会返回[0,0]
*/
export function readImageWH(base64StrOrUrl) {
return new Promise((resolve, reject) => {
// 创建Image对象(相当于html中的img标签),在内存中加载图片,并未插到DOM中,所以不可见
let img = new Image()
// 加载成功
img.onload = function() {
resolve([img.width, img.height])
}
// 加载失败,返回[0, 0]
img.onerror = function(error) {
// reject(error)
resolve([0, 0])
}
// 网络图片时支持跨域请求
img.crossOrigin = 'anonymous'
// src属性设置一定要放在onload之后,否则在IE11上报错
img.src = base64StrOrUrl
})
}