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

js 获取图片原始宽高并等比例缩放相关推荐

php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
php 改变图片的宽高,php缩放图片(根据宽高的等比例缩放)示例
php缩放图片(根据宽高的等比例缩放)示例发布于 2014-12-07 08:53:31 | 149 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hyperte ...
php改变图片宽高,php缩放图片(根据宽高的等比例缩放)实例介绍
使用方法: 设定宽高,不等比例缩放 include('SimpleImage.php'); $image = new SimpleImage(); $image->load('picture.j ...
php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
前端js获取图片大小扩展名_前端 JS 获取 Image 图像宽高尺寸
前端 JS 获取 Image 图像宽高尺寸简介项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
微信小程序获取图片的宽高，以及如何获取手机设备的宽高？
如何在微信小程序中获取图片的宽高 ? 首先拿到图片的路径,相对/绝对路径都行,其次通过 wx.getImageInfo 获取到图片的宽高 wx.getImageInfo({src,success: f ...
java 获取图片的宽高
博客引用处(以下内容在原有博客基础上进行补充或更改,谢谢这些大牛的博客指导): 通过java获取图片的宽高获取本地文件的图片尺寸: import java.awt.image.BufferedIma ...
JS获取video真实宽高
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', fu ...

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

js 获取图片原始宽高并等比例缩放相关推荐

最新文章

热门文章