脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 缩放图片大小

js 控制图片大小核心讲解

 更新时间：2013年10月09日 16:29:26   作者：  
控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，核心代码如下，感兴趣的朋友可以参考下
缩放图片脚本分享
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script>

function AutoResizeImage(maxWidth,maxHeight){
var objImg = document.getElementById("operImg");
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else 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){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>

</head>

<body>

<img src="1111.jpg" border="0" alt="534 X 800" id="operImg"/>

<input type="button" value="缩放至宽100px，等比例压缩" onclick="AutoResizeImage(100,0)"/>

<input type="button" value="缩放至300px，等比例压缩" onclick="AutoResizeImage(300,0)"/>

<input type="button" value="原图" onclick="AutoResizeImage(0,0)"/>
</body>
</html>

重点js:
复制代码 代码如下:

function AutoResizeImage(maxWidth,maxHeight){
var objImg = document.getElementById("operImg");
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else 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){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
您可能感兴趣的文章:

相关文章

  • JavaScript实现页面跳转的方式汇总

    JavaScript实现页面跳转的方式汇总

    这篇文章主要介绍了JavaScript实现页面跳转的方式汇总的相关资料,需要的朋友可以参考下
    2016-05-05
  • 微信小程序页面间传递数组对象方法解析

    微信小程序页面间传递数组对象方法解析

    这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JS 使用for循环遍历子节点查找元素

    JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素，经测试，效果不错，需要的朋友可以看看
    2014-09-09
  • javascript使用正则控制input输入框允许输入的值方法大全

    javascript使用正则控制input输入框允许输入的值方法大全

    在做项目的时候，我们经常会遇到控制input输入框允许输入的值为数字，字母，汉字或者混排的情况，那么我们怎么来处理呢，下面我们就来探讨怎么通过用javascript正则来实现
    2014-06-06
  • JavaScript function函数种类详解

    JavaScript function函数种类详解

    这篇文章主要为大家详细介绍了JavaScript function函数种类，包括普通函数、匿名函数、闭包函数，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 详谈js遍历集合(Array,Map,Set)

    详谈js遍历集合(Array,Map,Set)

    下面小编就为大家带来一篇详谈js遍历集合(Array,Map,Set)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • js实现简单秒表走动的时钟特效

    js实现简单秒表走动的时钟特效

    这篇文章主要为大家详细介绍了js实现简单秒表走动的时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JSON格式的键盘编码对照表

    JSON格式的键盘编码对照表

    这篇文章主要介绍了JSON格式的键盘编码对照表,本文给出英文键名、对应数值和中文注释,需要的朋友可以参考下
    2015-01-01
  • 用javascript实现简单计算器

    用javascript实现简单计算器

    这篇文章主要为大家详细介绍了用javascript实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • javaScript实现滚动新闻的方法

    javaScript实现滚动新闻的方法

    这篇文章主要介绍了javaScript实现滚动新闻的方法,涉及javascript实现页面滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论