js 获取图片原始宽高并等比例缩放

近期做一个驾考项目,由于每张图片加载的时候比例大小都不一样,在试题练习中加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好。以下就是实现方法:

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;
    }
}

 

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值