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;
}

相关文章

  • js获取class的所有元素

    js获取class的所有元素

    ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。
    2013-03-03
  • bootstrap table复杂操作代码

    bootstrap table复杂操作代码

    这篇文章主要为大家详细介绍了bootstrap table复杂操作代码,生成外层表格,填充表格内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js获取浏览器的各种属性

    js获取浏览器的各种属性

    本篇文章主要介绍了js获取浏览器各种属性的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 第一章之初识Bootstrap

    第一章之初识Bootstrap

    这篇文章主要介绍了第一章之初识Bootstrap的相关资料,需要的朋友可以参考下
    2016-04-04
  • TypeScript 中如何限制对象键名的取值范围

    TypeScript 中如何限制对象键名的取值范围

    TypeScript由微软开发的自由和开源的编程语言,是一种给 JavaScript 添加特性的语言扩展,接下来通过本文给大家介绍TypeScript 中如何限制对象键名的取值范围,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • 解决idea开发遇到javascript动态添加html元素时中文乱码的问题

    解决idea开发遇到javascript动态添加html元素时中文乱码的问题

    这篇文章主要介绍了解决idea开发遇到javascript动态添加html元素时中文乱码的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • JavaScript实现的select点菜功能示例

    JavaScript实现的select点菜功能示例

    这篇文章主要介绍了JavaScript实现的select点菜功能,涉及javascript动态操作页面元素及元素遍历相关技巧,需要的朋友可以参考下
    2017-01-01
  • js构造函数、索引数组和属性的实现方式和使用

    js构造函数、索引数组和属性的实现方式和使用

    本文主要介绍和小结js的构造函数,关联数组的实现方式和使用,及不可变对象和它的实现方式及他们使用过程中要注意的点,需要的朋友可以参考下
    2014-11-11
  • 微信小程序搭建自己的Https服务器

    微信小程序搭建自己的Https服务器

    这篇文章主要介绍了微信小程序搭建Https服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 可以自动轮换的页签 tabs with auto play fucntion

    可以自动轮换的页签 tabs with auto play fucntion

    HTML、CSS方面改写了一下结构,用了一个DL javascript方面可以选择不断自动循环,或者只循环一次的,点击以后继续循环,或者停止循环
    2008-02-02

最新评论