当前位置:学会吧培训频道电脑知识学习网页制作Javascript教程JS图片压缩–图片后加载后按比例缩放» 正文

JS图片压缩–图片后加载后按比例缩放

[08-08 00:41:17]   来源:http://www.xuehuiba.com  Javascript教程   阅读:8774
概要:电脑术语解释大全 http://www.xuehuiba.com原理:图片加载完后把图片的尺寸固定在一个固定的范围之内。。JS Code:<script type="text/javascript">var proMaxHeight=100;var proMaxWidth=100;function ImgAuto(ImgD){var image=new Image();image.src=ImgD.src;image.onload = function(){if(image.width>0&&image.height>0){var rate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;if(rate<=1){ImgD.width=image.width*rate;ImgD.height=imag
JS图片压缩–图片后加载后按比例缩放,标签:javascript视频教程,javascript教程下载,http://www.xuehuiba.com
电脑术语解释大全 http://www.xuehuiba.com

原理:图片加载完后把图片的尺寸固定在一个固定的范围之内。。

JS Code:

<script type="text/javascript">

var proMaxHeight=100;
var proMaxWidth=100;


function ImgAuto(ImgD)
{
var image=new Image();
image.src=ImgD.src;
image.onload = function(){
if(image.width>0&&image.height>0)
{
var rate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1)
{
ImgD.width=image.width*rate;
ImgD.height=image.height*rate
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
};
image.onload();
};

</script>

HTML Code:

<body>
<img d/file/p/2009-09-10/20090910090823190.jpg" id="test"/>
<script type="text/javascript" src="img.js"></script>

</body>

电脑术语解释大全 http://www.xuehuiba.com
Tag:Javascript教程javascript视频教程,javascript教程下载电脑知识学习 - 网页制作 - Javascript教程
《JS图片压缩–图片后加载后按比例缩放》相关文章
Copyright 学会吧 All Right Reserved.
在线学习社区!--学会吧
1 2 3 4 5 6 7 7 8 9 10 11 12 13