用javascript控制图片等比例缩放的问题？

Question

<img src="uploadfile/<%=trst("imagename")%>" onload="resize(this)"        onresize="resize(this)" >

Answer 1

yongfa365(yongfa365)你的方法还是不行。天外水货的是什么意思呢？可否说明白？

Answer 2

<script language='javascript'>
//根据Id查询对象
function EuwFindObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=EuwFindObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}//按比例缩放图片，
//参数 最大宽度，最大高度，图片Id（这里Id是传入的字符串，而不是对象）
function ResizeRatio(maxWidth,maxHeight,objImgTmp)
{
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var isKernel = true;
var objImg = EuwFindObj(objImgTmp);
    if (objImg==null) {isKernel = false};
    if (isKernel && objImg.width==0) {isKernel = false};
    var width = 0;
    var height = 0;
    if (isKernel){
        var imgTmp = new Image();
        imgTmp.src = objImg.src;
        width = imgTmp.width;
        height = imgTmp.height;
if (width==0){
var timer=window.setTimeout("ResizeRatio(" + maxWidth + "," + maxHeight + ",'" + objImgTmp + "')",500);
}else{
wRatio = EuwStr2Float(maxWidth / width,2);
hRatio = EuwStr2Float(maxHeight / height,2);
//alert(wRatio + "--" + hRatio);
if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
 objImg.width = width * Ratio;
 objImg.height = height * Ratio;
}else{
 objImg.width = width;
 objImg.height = height;
}
}
    }else{
        var timer=window.setTimeout("ResizeRatio(" + maxWidth + "," + maxHeight + ",'" + objImgTmp + "')",500);
    }
}//转换数字函数
function EuwStr2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);   switch (true)
   {
      case (ai_digit==null)://
         fdb_tmp = fdb_tmp;
         break;
      case (ai_digit==0)://
         fdb_tmp = Math.round(fdb_tmp);
         break;
      case (ai_digit>0)://
         for (var i=0;i<ai_digit;i++) fs_digit +="0";
         fi_digit = parseInt(fs_digit);
         fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
         if (as_type=="str")
         {
            fs_tmp1 = fdb_tmp.toString();
            fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
            fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
            fdb_tmp = fs_tmp1.substr(0,fi_pos);
         }
         break;
   }
   return fdb_tmp;
}</script>
IE，火狐测试通过原图：(300 X 60)<img src="http://zi.csdn.net/bea.gif" border="1"><BR><BR>
缩放后：(150 X 30)(按最大高度30px比例缩放),此时最大宽度参数传入0
<img id="testimg1" src="http://zi.csdn.net/bea.gif" border="1"  width="0" height="30" onload="ResizeRatio(0,30,'testimg1')"><BR><BR>
缩放后：(100 X 20)(按最大宽度100px比例缩放),此时最大高度参数传入0
<img id="testimg2" src="http://zi.csdn.net/bea.gif" border="1"  width="100" height="0" onload="ResizeRatio(100,0,'testimg2')"><BR><BR>
缩放后：(100 X 20)(按最大高度30px，最大宽度100px比例缩放),此时最大高度参数传入0
<img id="testimg3" src="http://zi.csdn.net/bea.gif" border="1"  width="100" height="30" onload="ResizeRatio(100,30,'testimg3')"><BR><BR>

Answer 3

修正：不需要数字转换函数，图片默认宽度不能为0，最少给1px<script language='javascript'>
//根据Id查询对象
function EuwFindObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=EuwFindObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}//按比例缩放图片，
//参数 最大宽度，最大高度，图片Id（这里Id是传入的字符串，而不是对象）
function ResizeRatio(maxWidth,maxHeight,objImgTmp)
{
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var isKernel = true;
var objImg = EuwFindObj(objImgTmp);
    if (objImg==null) {isKernel = false};
    if (isKernel && objImg.width==0) {isKernel = false};
    var width = 0;
    var height = 0;
    if (isKernel){
        var imgTmp = new Image();
        imgTmp.src = objImg.src;
        width = imgTmp.width;
        height = imgTmp.height;
if (width==0){
var timer=window.setTimeout("ResizeRatio(" + maxWidth + "," + maxHeight + ",'" + objImgTmp + "')",500);
}else{
wRatio = maxWidth / width;
hRatio = maxHeight / height;
//alert(wRatio + "--" + hRatio);
if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
 objImg.width = width * Ratio;
 objImg.height = height * Ratio;
}else{
 objImg.width = width;
 objImg.height = height;
}
}
    }else{
        var timer=window.setTimeout("ResizeRatio(" + maxWidth + "," + maxHeight + ",'" + objImgTmp + "')",500);
    }
}
</script>
IE，火狐测试通过原图：(300 X 60)<img src="http://zi.csdn.net/bea.gif" border="1"><BR><BR>
缩放后：(150 X 30)(按最大高度30px比例缩放),此时最大宽度参数传入0
<img id="testimg1" src="http://zi.csdn.net/bea.gif" border="1"  width="1" height="30" onload="ResizeRatio(0,30,'testimg1')"><BR><BR>
缩放后：(100 X 20)(按最大宽度100px比例缩放),此时最大高度参数传入0
<img id="testimg2" src="http://zi.csdn.net/bea.gif" border="1"  width="100" height="0" onload="ResizeRatio(122,0,'testimg2')"><BR><BR>
缩放后：(100 X 20)(按最大高度30px，最大宽度100px比例缩放),此时最大高度参数传入0
<img id="testimg3" src="http://zi.csdn.net/bea.gif" border="1"  width="100" height="30" onload="ResizeRatio(100,30,'testimg3')"><BR><BR>

Answer 4

你的这种情况是因为有时候图片还没有下载完毕就已经运行那个改变图片大小的函数了，所以就会失败
最好是判断一下图片是否已经下载完毕function setInt()
{
    if( document.imges("myimg").readyState == "complete" )
    {
        clearInterval( myInt );
        resize();
    }
}function resize()
{
         var obj = document.getElementById( "myimg" );
iWidth = obj.width;
iHeight = obj.height;
if(iWidth>iHeight)
{
if(iWidth>115){
obj.width = 115;
}
}else{
if(iHeight>115){
obj.height = 115;
}
}

}
</script><img id="myimg" src="uploadfile/<%=trst("imagename")%>" onload="var myInt = window.setInterval('setInt()',500)">