js 控制图片大小核心讲解
控制图片大小的方法有很多，在本文将为大家详细介绍下使用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 控制图片大小核心讲解的更多相关文章
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- js控制图片自动缩放，实现铺满盒子，不变形，完全局中
此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...
- 用CSS控制图片大小显示的方法
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...
- CSS控制图片大小
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...
- JS控制图片显示的大小（图片等比例缩放）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【JS控制图片显示的大小（图片等比例缩放）】
效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小 function ResizeImages() { var myimg, oldwidth, oldheight; var ...
随机推荐
- springboot项目启动报错
启动springboot项目报错: NoSuchMethodError: org.apache.tomcat.util.scan.StandardJarScanner.setJarScanFilter ...
- Silverlight 之 断点调试
silverlight程序经常会遇到无法调试的情况,下面来总结解决方案. 一.问题描述 在Silverlight开发过程中,经常时不时的会碰到Silverlight无法调试的问题.如下几种情况: 1. ...
- Linux Bash 脚本：自己定义延迟代码块（裸数据保存方案）
结合 alias 和 read 使用方法.能够保存一些将要延迟执行的脚本,或者裸数据(字符串不被扩展)到一个变量中.以备后用. $ alias BEGIN='read -d "" ...
- uploadify上传带参数及接收参数的方法
function uploadify() { $("#uploadify").uploadify({ method:'post', uploader: '/Manage/Order ...
- iOS最为简单时间轴（GZTimeLine）
概述 迄今为止最为简单的时间轴 :可以自定义(类似于美团的送餐信息) 详细 代码下载:http://www.demodashi.com/demo/10797.html 迄今为止 最为简单的时间轴 :可 ...
- ORACLE经常使用命令
1 怎样查看数据库中都有什么表? select * from sys.user_tables; 2 怎样链接数据库 sqlplus /nolog;conn sys/oracle as sysdba; ...
- C++调用Java的Jar包
一个简单需求:用C++调用Jar包. 实现基本思路:调用CreateProcess API来启动cmd.exe执行jar包. 调用类CJarAppCall. JarAppCall.h #pragma ...
- ASP.NET#JavaScript中调用WebServer注意的问题
1)要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,就要取消注销以下行:[System.Web.Script.Services.ScriptService](2)调用格式:命名空间 ...
- Oracle实例
ORA-12505 Listener refused the connection with following error:ORA-12505,TNS:listener 确定这是连接数据库的SID错 ...
- IOS开发之瀑布流照片墙实现
想必大家已经对互联网传统的照片布局方式司空见惯了,这种行列分明的布局虽然对用户来说简洁明了,但是长久的使用难免会产生审美疲劳.现在网上流行一种叫做“瀑布流”的照片布局样式,这种行与列参差不齐的状态着实 ...