如何在客户端用JS缩放图片？

给你个例子：<img src="./aaa.gif" id="aaa" onclick="ch()"><script language="javascript">
function ch()
{
alert(document.all.aaa.width);
alert(document.all.aaa.height);
}
</script>

<input type=button value=add onclick="mm(20)">
<input type=button value=sub onclick="mm(-20)">
<br><img id=meizz src=http://expert.csdn.net/images/csdn.gif><SCRIPT LANGUAGE="JavaScript">
function mm(n)
{
var img = document.images["meizz"];
img.style.width = img.clientWidth + n;
}
</SCRIPT>

objImg.style.zoom = number（你想放大或缩小的比例，1.0为原始尺寸）

<img ID="IMGSize" src="URL" style="width:X;Height:Y">
<script>document.all.IMGSize.width=X;document.all.IMGSize.Height=Y;</script>
这样做图片容易失真.
可以参考Window的文件加模板用标准控件.
<input type="file" onchange="Preview.Show(this.value);">
<br>
<object id=Preview classid="clsid:50F16B26-467E-11D1-8271-00C04FC3183B" width="100%" height=300></object>
最好在服务器上做.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Resize Image</TITLE>
<script language="JavaScript">
function SetImgSize(img)
{
var maxWidth = 160;
var maxHeight = 100;
var imgWidth = img.width;
var imgHeight = img.height; //这句可以移去
img.title = "原来大小：" + imgWidth + "px*" + imgHeight + "px(" + (imgWidth/imgHeight) + ":1)"; if(imgWidth <= maxWidth && imgHeight <= maxHeight)
{
//如果图片没有超过范围也需改变大小时，可以把本if语句的else块内语句复制到这里;

//这句可以移去
img.title += "\r现在大小：" + imgWidth + "px*" + imgHeight + "px[没有改变大小]";
}
else
{
if((maxWidth / maxHeight) > (imgWidth / imgHeight))
{
img.style.height = maxHeight;
img.style.width = imgWidth * (maxHeight / imgHeight);
}
else
{
img.style.width = maxWidth;
img.style.height = imgHeight * (maxWidth / imgWidth);
}
//这句可以移去
img.title += "\r现在大小：" + img.style.width + "*" + img.style.height + "(" + (img.style.width.replace("px","")/img.style.height.replace("px","")) + ":1)";
}
}
</script>
</HEAD><BODY>
<img id="Img1" src="C:\Documents and Settings\Gage\My Documents\My Pictures\样品.jpg" border="1" onload="SetImgSize(this);">
<img id="Img2" src="C:\Documents and Settings\Gage\My Documents\My Pictures\样品.jpg" border="1" width="380" height="180" onload="SetImgSize(this);">
<img id="Img3" src="C:\Documents and Settings\Gage\My Documents\My Pictures\样品.jpg" border="1" width="80" height="68" onload="SetImgSize(this);">
</BODY>
</HTML>

meizz(梅花雪) ：根据你的方法，保持脚本不变，如何做到右击放大的图片自动回到原始的尺寸？急盼回复！

<input type=button value=放大 onclick="mm(20)">
<input type=button value=缩小 onclick="mm(-20)"><br>
<img id=meizz src=http://expert.csdn.net/images/csdn.gif
onclick="style.cssText=''"><SCRIPT LANGUAGE="JavaScript">
function mm(n)
{
  var img = document.images["meizz"];
  if (!(n<0 && img.clientWidth <= Math.abs(n)))
  img.style.width  = img.clientWidth + n;
}
</SCRIPT>

不好意思, 没看清楚楼主是要右击事件, 改改改:
<input type=button value=放大 onclick="mm(20)">
<input type=button value=缩小 onclick="mm(-20)"><br>
<img id=meizz src=http://expert.csdn.net/images/csdn.gif
oncontextmenu="style.cssText=''"><SCRIPT LANGUAGE="JavaScript">
function mm(n)
{
  var img = document.images["meizz"];
  if (!(n<0 && img.clientWidth <= Math.abs(n)))
  img.style.width  = img.clientWidth + n;
}
</SCRIPT>

meizz(梅花雪):按照您上面的代码，没实现右击照片大小还原啊？！

参照Batiraul(Bati4Ever) 提供的方法, 当鼠标在图像上点击左键时放大, 当鼠标离开图片时图片恢复到原始大小.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<IMG SRC="D:/html/resource/ASK.jpg" WIDTH="16" HEIGHT="16" BORDER="0" onclick="this.style.zoom+=1;" onmouseout="javascript:this.style.zoom=1;"></BODY>
</HTML>

再修改了一下:
当在图像上点击鼠标左键时放大, 当点击鼠标右键时图片恢复到原始大小.
美中不足的是点击鼠标右键时会弹出快捷菜单.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY><IMG SRC="D:/html/resource/ASK.jpg" id="idImgTest" WIDTH="16" HEIGHT="16" BORDER="0" onmousedown="javascript:if (event.button==2||event.button==3)this.style.zoom=1; else this.style.zoom+=1;"></BODY>
</HTML>

调试易

如何在客户端用JS缩放图片？

解决方案 »