在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。
1.图片等比例缩放工具
[applescript] 纯文本查看 复制代码
//util.js
class util{
/***
* 按照显示图片的宽等比例缩放得到显示图片的高
* @params originalwidth 原始图片的宽
* @params originalheight 原始图片的高
* @params imagewidth 显示图片的宽，如果不传就使用屏幕的宽
* 返回图片的宽高对象
***/
static imagezoomheightutil(originalwidth,originalheight,imagewidth){
let imagesize = {};
if(imagewidth){
imagesize.imagewidth = imagewidth;
imagesize.imageheight = (imagewidth * originalheight) / originalwidth;
}else{//如果没有传imagewidth,使用屏幕的宽
wx.getsysteminfo({
success: function (res) {
imagewidth = res.windowwidth;
imagesize.imagewidth = imagewidth;
imagesize.imageheight = (imagewidth * originalheight) / originalwidth;
}
});
}
return imagesize;
}
/***
* 按照显示图片的高等比例缩放得到显示图片的宽
* @params originalwidth 原始图片的宽
* @params originalheight 原始图片的高
* @params imageheight 显示图片的高，如果不传就使用屏幕的高
* 返回图片的宽高对象
***/
static imagezoomwidthutil(originalwidth,originalheight,imageheight){
let imagesize = {};
if(imageheight){
imagesize.imagewidth = (imageheight *originalwidth) / originalheight;
imagesize.imageheight = imageheight;
}else{//如果没有传imageheight,使用屏幕的高
wx.getsysteminfo({
success: function (res) {
imageheight = res.windowheight;
imagesize.imagewidth = (imageheight *originalwidth) / originalheight;
imagesize.imageheight = imageheight;
}
});
}
return imagesize;
}
}
export default util;
2.使用image组件加载图片，通过bindload动态的获取图片的高度和宽度，动态的设置图片的高度和宽度
[applescript] 纯文本查看 复制代码
<image bindload="imageload" style="width:{{imagewidth}}px;;height:{{imageheight}}px;" src="../pro.png"/>
index.js代码如下
[applescript] 纯文本查看 复制代码
import util from '../common/util';
page({
data:{
imagewidth:0,
imageheight:0
},
imageload: function (e) {
//获取图片的原始宽度和高度
let originalwidth = e.detail.width;
let originalheight = e.detail.height;
//let imagesize = util.imagezoomheightutil(originalwidth,originalheight);
//let imagesize = util.imagezoomheightutil(originalwidth,originalheight,375);
let imagesize = util.imagezoomwidthutil(originalwidth,originalheight,145);
this.setdata({imagewidth:imagesize.imagewidth,imageheight:imagesize.imageheight});
}
})
以上就是微信小程序开发过程中关于图片处理的问题的详细内容。