[蛙蛙推荐]用JS自动生成等比例缩略图Web服务器教程
|
| 论文作者：佚名 论文来源：不详 论文发布时间：2006-6-18 22:54:40 论文发布人：chjchjchj |
 减小字体
 增大字体
摘要：[蛙蛙推荐]用JS自动生成等比例缩略图 [原创]用JS自动生成等比例所略图
<!--
本示例演示图片加载时自动显示等比例缩略图,在做web程序的时候往往会遇到客户上传很大的图片,但是显示的时候如果把所略图的高宽比手工设置好,由于图片的形状不同会造成显示变形,这里用一段小脚本程序来解决这个问题,你可以把它修改一下做的更通用一些,比如说把Wa_SetImgAutoSize()函数加个img参数,然后在图片的onload=事件里传送自己去调用函数.
-->
<HTML>
<HEAD>
<TITLE>演示图片等比例缩小</TITLE>
<script>
function Wa_SetImgAutoSize()
{
var img=document.all.img1;//获取图片
var MaxWidth=200;//设置图片宽度界限
var MaxHeight=100;//设置图片高度界限
var HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比
var WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比
if(img.readyState!="complete")return false;//确保图片完全加载
if(img.offsetWidth>MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight>MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
</script>
</HEAD>
<BODY>
<img alt="[蛙蛙推荐]用JS自动生成等比例缩略图" src=http://www.3pcode.com/article/article_111/ border=0 id="img1" onload="Wa_SetImgAutoSize();">
<br>
<input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>
|
|
|
|
|
|
|
| ∷相关技术评论 |
（评论内容只代表网友观点，与本站立场无关！） [查看发表评论...] | |
|
|
| |
 站内广告 |
 | |
|
| 站内搜索 |
| |
| 栏目导航 |
| |
|
|
| 本月热门 |
| |
|
|
| 本日热门 |
| |
|
|
|
设为首页
加入收藏
联系我们
相关技术