今天遇到这样一个需求:
上传一张图片前,需要先获取一下图片的缩放比例。
缩放比例以64px为基准,然后除以图片的宽高中最大值。那图片的宽和高如何获取呢?
首先要用FileReader的readAsDtataURL方法读到图片的url(base64),然后new一个Image实例,将src指向这个url,然后在image.onload回调函数中即可拿到图片宽和高。
getMaxWidthHeight(file){
return new Promise((resolve)=>{
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = (res)=>{
let image = new Image();
if(res.target && res.target.result) {
(image.src as any) = res.target.result;
image.onload = ()=>{
resolve(Math.max(image.width,image.height));
}
}
}
});
}
async uploadPic(e) {
let scale = 1;
let file = e.target.files[0];
let maxWidthHeight = await getMaxWidthHeight(file);
if(maxWidthHeight && typeof maxWidthHeight === 'number' && maxWidthHeight!==0) {
scale = 64/maxWidthHeight;
}
console.log('缩放比例>>>',scale);
}
网友评论