用JavaScript自动生成等比例缩略图

news/2024/7/12 11:06:31 标签: javascript, border, function, input, 脚本, html
htmledit_views"> <!--
本示例演示图片加载时自动显示等比例缩略图,在做web程序的时候往往会遇到客户上传很大的图片,但是显示的时候如果把所略图的 高宽比手工设置好,由于图片的形状不同会造成显示变形,这里用一段小html" title=脚本>脚本程序来解决这个问题,你可以把它修改一下做的更通用一些,比如说把 Wa_SetImgAutoSize()函数加个img参数,然后在图片的οnlοad=事件里传送自己去调用函数.
-->
<HTML>
<HEAD>
<TITLE>演示图片等比例缩小</TITLE>
<script>
html" title=function>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 src="" html" title=border>border=0 id="img1" οnlοad="Wa_SetImgAutoSize();">
<br>
<html" title=input>input id=inp type="file" onpropertychange="img1.src=this.value;">
</BODY>
</HTML>

http://www.niftyadmin.cn/n/1413106.html

相关文章

样式化段落(标签p)首行

段落首行粗体效果: p:first-line{font-weight: bold; } 用图片样式化段落首行 P:first-line{font-size:2em;background-image:url(background.gif); }

线性规划——单纯形法

对于包含1个优化目标&#xff0c;n个变量&#xff0c;m个线性约束条件的线性规划问题来说&#xff0c;首先这是一个凸优化问题&#xff0c;一定存在最优值&#xff0c;其次最优值的取值一定是在m个约束条件构建几何体的顶点上。那么怎么找到所有的顶点&#xff0c;并且找到其中…

根据一个表的数据情况显示另一个表的数据

现在有 shop表、goods表 要获取shop的前100条数据&#xff0c; 条件:根据goods表中的is_onshelf1 and status1 and is_delete0的商品数量>0 关联条件 shop shop_id goods shop_id (1) SELECTid,shop_id,name FROMshop WHEREshop_id IN (SELECTshop_idFROMgoodsWHERESTA…

如何学习新的IT技术

如何学习新的IT技术 从步入IT行业工作到现在已经超过一年了&#xff0c;我从最初的Java开发转向了大数据方向。 随着接触到的新技术的急剧增加&#xff0c;学习的时间严重不足。 又加上工作内容的时长变动&#xff0c;自己的学习计划也是一次又一次的被打乱。 在经过一番番血与…

创建文本高亮效果

<p>一段文字<strong>需要高亮显示的文字</strong></p> strong {font-weight: normal;background-color: yellow; } 也可以这样:用em元素代替strong元素 <p>一段文字<em>需要高亮显示的文字</em></p> em {font-style:normal;ba…

JS微信_微信SDK

记录微信SDK的总文章入口及微信SDK的踩坑记录 微信sdkshiyong 1.微信授权 微信授权2.授权第三方扫码登陆 第三方网站扫码登陆以上内容&#xff0c;如有错误请指出&#xff0c;不甚感激。 如需转载&#xff0c;请注明出处 转载于:https://www.cnblogs.com/adelina-blog/p/109553…

JMX in action第二篇

为什么80%的码农都做不了架构师&#xff1f;>>> 一&#xff0c;DynamicMBean 其实一看到Dynamic这个词就基本上确定了&#xff0c;就是反射那一套&#xff0c;不外乎属性获取&#xff0c;设定&#xff0c;方法调用等等,但是这个在使用中是至关重要的&#xff0c;因…

free命令新旧两个版本的区别

Linux新版本的free命令&#xff1a; 总物理内存 totalusedfreebuff/cache 还可以申请的物理内存 available 应用程序已使用的物理内存 used 已占用的物理内存 total - available available < free buff/cache 因为有一部分page或cache是不能回收的 参考&#xff…