图片等比例压缩

Question

最近在做一个类似于相框的东西但是相框的宽度和高度是不固定的所以，希望相框中的图片等比例压缩。按照宽度等比例显示，按照高度等比例显示求大神，支招就还100分，敬上

Answer 1

    function proDownImage(path,imgObj) { // 等比压缩图片工具  
        //var proMaxHeight = 185;  
        var proMaxHeight=300;  
        var proMaxWidth = 175;  
        var size = {};　  
        var image = new Image();　  
        
        image.onload=  
        function() { // 当加载状态改变时执行此方法,因为img的加载有延迟  
            if (image.readyState == "complete") { // 当加载状态为完全结束时进入  
                if (image.width > 0 && image.height > 0) {  
                    var ww = proMaxWidth / image.width;  
                    var hh = proMaxHeight / image.height;　  
                    var rate = (ww < hh) ? ww: hh;  
                    if (rate <= 1) {　  
                        alert("imgage width*rate is:" + image.width * rate);  
                        size.width = image.width * rate;  
                        size.height = image.height * rate;  
                    } else {  
                        alert("imgage width is:" + image.width);　　  
                        size.width = image.width;　　  
                        size.height = image.height;　　　  
                    }　  
                }  
            }  
            imgObj.style.width=size.width+"px";  
            imgObj.style.height=size.height+"px";   
        };  
 image.src = path;　 
    }  

Answer 2

设置max-width或者max-height试试 这个好像设置了高或宽会自己等比变化吧？

Answer 3

3楼正解
img 里 设置max-width:100%  和 max-height: 100%

Answer 4

LZ可以试试看下面这段：var resize = function(img, maxh, maxw) {
    var ratio = maxh/maxw;
    if (img.height/img.width > ratio){
        // height is the problem
        if (img.height > maxh){
            img.width = Math.round(img.width(maxh/img.height));
            img.height = maxh;
        }
    } else { // width is the problem
        if (img.width > maxh){
            img.height = Math.round(img.height(maxw/img.width));
            img.width = maxw;
        }
    }
};

Answer 5

只设置 width 和 height 之一就可以了

Answer 6

 <script type="text/javascript">
function $(id ){return typeof id=='string'?document.getElementById(id):id}
function zoom(img,w,h ) {
    var img=$(img),_img= new Image();
   if(typeof(img.real_width)!='undefined'){
    reSet();
   }else{
    _img.src=img.src;
    _img.onload=function(){
     img.real_width=_img.width;
     img.real_height=_img.height;
     reSet();
    }
   }
    function reSet(){
    var ww = w / img.real_width;  
    var hh = h /img.real_height;　  
    var rs = (ww < hh) ? [ww,'width','height']: [hh,'height','width']; 
   img.style[rs[1]]=parseInt(img[ 'real_'+rs[1]]*rs[0])+'px';
   img.style[rs[2]]='auto';
   img[rs[2]]='auto';
    }
  }
</script>
 <button onclick="zoom('img1',100,400)" >100 X 400</button>
  <button onclick="zoom('img1',400,500)" >400 X 500</button>
<button onclick="zoom('img1',1000,800)" >1000 X 800</button>
 <br/>
 <img id="img1"  src="http://avatar.csdn.net/6/6/E/1_qust_sunfei.jpg" >
 

Answer 7

之前写过一个方法：生成等比缩放图片的 ，这是使用框架自带的。   
思路：
/**
     * 使用imagick 等比缩放图片
     * @param string $source_img  源图片地址
     * @param int $width   缩放后图片宽度
     * @param int $height  缩放后图片高度
     * @param string $target_img  缩放后图片地址
     * @return String 图片路径
     */
    public function thumbScaleImage($source_img, $width, $height, $target_img = '', $flag_source = false) {
        $result = $this->imagick->readImage($source_img);
        if (!$result) {
            return false;
        }
        $srcWH = $this->imagick->getImageGeometry();
        if ($srcWH['width'] > $width || false === $flag_source) {
            $srcW['width'] = $width;
            $srcH['height'] = ceil($srcW['width'] / $srcWH['width'] * $srcWH['height']);
        } else {
            $srcW['width'] = $srcWH['width'];
            $srcH['height'] = ceil($srcWH['height']);
        }
        if (!empty($srcW['width']) && !empty($srcH['height'])) {
            $this->imagick->thumbnailImage($srcW['width'], $srcH['height'], true);
            $ext = strtolower($this->imagick->getImageFormat());
            $ext = ($ext == 'jpeg') ? 'jpg' : $ext;
            $new_img = new Imagick();
            $new_img->newImage($srcW['width'], $srcH['height'], new ImagickPixel("#FFFFFF"), $ext);
            if ($ext == 'png') {
                $new_img->setImageOpacity(0);
            }            $new_img->compositeImage($this->imagick, imagick::COMPOSITE_OVER, 0, 0);            if (empty($target_img)) {
                $typeNum = $this->getTypePos($source_img);
                $imgBaseUrl = substr($source_img, 0, $typeNum);
                $target_img = $imgBaseUrl . "_" . $srcW['width'] . "_" . $srcH['height'] . "." . $ext;
            }            $new_img->setImageFileName($target_img);
            $new_img->writeImage();
            $new_img->clear();
            return $target_img;
        } else {
            //var_dump($source_img);
            //var_dump($srcW['width']);
            //var_dump($srcH['height']);
            return $source_img;
        }
    }

Answer 8

scale1 = maxwidth/img.width
scale2 = maxheight/img.heightscale = min(scale1,scale2)  //最终采用的缩放比例