控制图片大小的方法有很多，在本文将为大家详细介绍下使用js实现缩放图片，核心代码如下，感兴趣的朋友可以参考下

缩放图片脚本分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>js 控制图片大小-www.jbxue.com</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 控制图片大小核心讲解的更多相关文章

  1. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  2. js控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  3. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  4. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  5. JS控制图片显示的大小（图片等比例缩放）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【JS控制图片显示的大小（图片等比例缩放）】

    效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  8. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  9. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

随机推荐

  1. c语言 多重排序

    经过了两天,终于会了. #include<stdio.h> #include<string.h> struct A { char name[100]; int gread; } ...

  2. SICP-练习2.17

    [问题] 请定义出过程last-pair.它返回仅仅包括给定(非空)表里最后一个元素的表: (last-pair (list 23 72 149 34)) (34) [分析] last-pair须要处 ...

  3. VM虚拟机启动报错Reason Failed to lock the file怎么办

    VMware启动报错Reason: Failed to lock the file的解决方法 症状:  启动VMware虚拟机的时候出现了Cannot open the disk '*.vmdk' o ...

  4. shiro实现基于机构加username的验证以及rememberMe

    一.Shiro的一些经验与rememberMe实现原理 Shiro的登录(Authorization)和验权(Authentication).默认都是依据usernameUserName来做验证和授权 ...

  5. 替换 ionic 中的 图标

    第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀 ...

  6. 【shell】正则表达式

    当一个文件或命令输出中抽取或过滤文本时,可以使用正则表达式(RE),正则表达式是一些特殊或很不特殊的字符串模式的集合. 在Linux中grep.awk.sed均可解释正则 1.基本元字符集及其定义 ^ ...

  7. 【Oracle】函数

    函数一般用于计算和返回一个值,可以将经常需要使用的计算或功能写成一个函数. 语法 create [or replace] function func_name[(parameter1,[,parame ...

  8. hmac库 密钥相关的哈希运算消息认证码

    # -*- coding: cp936 -*- #xiaodeng #python 2.7.10 #HMAC是密钥相关的哈希运算消息认证码,HMAC运算利用哈希算法,以一个密钥和一个消息为输入,生成一 ...

  9. springMVC + hadoop + httpclient 文件上传请求直接写入hdfs

    1.首先是一个基于httpclient的java 应用程序,代码在这篇文章的开头:点击打开链接 2.我们首先写一个基于springMVC框架的简单接收请求上传的文件保存本地文件系统的demo,程序代码 ...

  10. hdoj 2199 Can you solve this equation? 【二分枚举】

    题意:给出一个数让你求出等于这个数的x 策略:如题. 由于整个式子是单调递增的.所以能够用二分. 要注意到精度. 代码: #include <stdio.h> #include <s ...