前几天养花老板推荐了一波使用JS实现缩略图自动缩放和裁切的方法，特别分享。
该方法通过class识别需要处理的图片，通过_width和_height获取需要的长宽值，实现比例缩放。计算后通过JS添加overflow的外框实现裁切效果。
个人也比较推荐使用DIV外框实现伪裁切的这种方式，不需要存储各种各样的缩略图，在一般的CMS系统中通常保证2个版本的图片就足够使用。能够保证图片存储中的整洁性，便于备份、维护、升级和迁移。
另外，使用JS配合外框的一个好处是灵活——你也可以修改下面的代码，自行处理图片的裁切位置。甚至对于特殊的图片，还可以通过增加_left和_height的方式自由指定位置。有需要的朋友们也可以根据自己的需要修改。
JS主函数：
//图片自动缩放
function DrawImage(ImgObj){
var image = new Image();
image.src = ImgObj.attr('src');
ImgObj.attr('src', '/static/module/admin/img/onimg.png');
var maxWidth = ImgObj.attr('_width'),
maxHeight = ImgObj.attr('_height');
var iWidth = image.width,
iHeight = image.height;
var containerRatio = maxWidth / maxHeight,
imgRatio = iWidth / iHeight;
if (imgRatio > containerRatio) {
iWidth = maxWidth;
iHeight = maxWidth / imgRatio;
if(iHeight < maxHeight){
iHeight = maxHeight;
iWidth = maxHeight * imgRatio;
}
} else if (imgRatio < containerRatio) {
iHeight = maxHeight;
iWidth = maxHeight * imgRatio;
if(iWidth < maxWidth){
iWidth = maxWidth;
iHeight = maxWidth / imgRatio;
}
} else {
iWidth = maxWidth;
iHeight = maxHeight;
}
var len = ImgObj.parent().children().length,
parentWidth = ImgObj.parent().width(),
parentHeight = ImgObj.parent().height()
if((len == 1 && ImgObj.parent('td').length == 0) || (parentWidth == maxWidth && parentHeight == maxHeight)){
var parent = ImgObj.parent().css({'overflow':'hidden','width':maxWidth+'px','height':maxHeight+'px','display':'block'});
} else {
var parentDiv = '<div style="overflow: hidden; width: '+maxWidth+'px; height: '+maxHeight+'px; display: block;"></div>';
ImgObj.wrap(parentDiv);
}
ImgObj.attr('src', image.src);
var ml = -(iWidth-maxWidth)/2;
var mt = -(iHeight-maxHeight)/2;
ImgObj.css({"width":iWidth, "height":iHeight, 'marginLeft':ml+'px', 'marginTop':mt+'px'});
}
JS初始化(需要Jquery支持)：
$('.resize').each(function(){
DrawImage($(this));
});
HTML图片代码示例：
img src="/abc.jpg" class="resize" _width="380px" _height="640px"
源码提供者：养花老板