近期做一个驾考项目,由于每张图片加载的时候比例大小都不一样,在试题练习中加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好。以下就是实现方法:
html:
<img style="max-height: 200px;max-width: 300px" src="demo.png"; onload="javascript:DrawImage(this,200,300);/>
js:
/**
* 图片按宽高比例进行自动缩放
* @param ImgObj
* 缩放图片源对象
* @param maxWidth
* 允许缩放的最大宽度
* @param maxHeight
* 允许缩放的最大高度
* @usage
* 调用:<img src="图片" onload="javascript:DrawImage(this,300,200)">
*/
function DrawImage(ImgObj, maxWidth, maxHeight){
var image = new Image();
//原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响)
image.src = ImgObj.src;
// 用于设定图片的宽度和高度
var tempWidth;
var tempHeight;
if(image.width > 0 && image.height > 0){
//原图片宽高比例 大于 指定的宽高比例,这就说明了原图片的宽度必然 > 高度
if (image.width/image.height >= maxWidth/maxHeight) {
if (image.width > maxWidth) {
tempWidth = maxWidth;
// 按原图片的比例进行缩放
tempHeight = (image.height * maxWidth) / image.width;
} else {
// 按原图片的大小进行缩放
tempWidth = image.width;
tempHeight = image.height;
}
} else {// 原图片的高度必然 > 宽度
if (image.height > maxHeight) {
tempHeight = maxHeight;
// 按原图片的比例进行缩放
tempWidth = (image.width * maxHeight) / image.height;
} else {
// 按原图片的大小进行缩放
tempWidth = image.width;
tempHeight = image.height;
}
}
// 设置页面图片的宽和高
ImgObj.height = tempHeight;
ImgObj.width = tempWidth;
// 提示图片的原来大小
ImgObj.alt = image.width + "×" + image.height;
}
}