JavaScript 实现图片等比缩放

type

Post

status

Published

date

slug

code-16

summary

实现原理：

（1）获取图片的原始高度和宽度。可以通过以下代码实现：


function getImgNaturalDimensions(oImg, callback) {            
	var nWidth, nHeight;            
	if (!oImg.naturalWidth) {                
		nWidth = oImg.naturalWidth;                
		nHeight = oImg.naturalHeight;                
		callback(oImg,{ w: nWidth, h: nHeight });            
	} else {                
		var nImg = new Image();                
		nImg.onload = function () {                    
			var nWidth = nImg.width,                        
			nHeight = nImg.height;                    
			callback(oImg,{ w: nWidth, h: nHeight });               
		}                
	nImg.src = oImg.src;            
	}
}

（2）计算缩放后的宽度和高度，分为以下几种情况:图片的高和宽都超限了，这时要算一下哪个超的多，按超多的缩放比例等比计算宽和高。

高超限，宽未超限，按高的缩放等比计算。

宽超限，高未超退，按宽的缩放等比计算。

高宽均未超限，返回原始宽和高。


function scale(maxW, maxH, orgW, orgH) {            
	if (orgW < maxW && orgH < maxH) {                
		return { w: orgW, h: orgH }            
	} else if (orgW > maxW && orgH > maxH) {                
		var sw = orgW / maxW, sh = orgH / maxH;                
		if (sw > sh) {                    
		return { w: maxW, h: maxH / sw };                
		} else {                    
		return { w: maxW / sh, h: maxH };                
		}            
	} else if (orgW > maxW) {                
		var sw = orgW / maxW;                
		return { w: maxW, h: orgH / sw };            
	} else {                
		var sh = orgH / maxH;                
		return { w: orgW/sh, h: maxH };            
	}
}

（3）给图片赋值宽和高。


var resimg = scale(300, 999999, dimensions.w, dimensions.h);                    image.style.width = resimg.w + 'px';                    
image.style.height = resimg.h + 'px';

这种方法经过测试可行，还未发现不兼容情况，可根据自己的情况调整代码。

以上是主要代码，需要说明的是图片外的容器一定有要个宽度或高度不然都不限了就没有必要使用了，可同时有宽度和高度，也可以有其中一个，另一个不限时可设置成一个大值即可。