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 ...
随机推荐
- c语言訪问excel
直接通过格式化读取文件就可实现,见附件
- STL - Unorderedset - 自定义哈希函数
1. hash工具类 hashval.hpp #ifndef _Core_HashVal_H_ #define _Core_HashVal_H_ #include <functional> ...
- ZH奶酪：【数据结构与算法】搜索之BFS
1.目标 通过本文,希望可以达到以下目标,当遇到任意问题时,可以: 1.很快建立状态空间: 2.提出一个合理算法: 3.简单估计时空性能: 2.搜索分类 2.1.盲目搜索 按照预定的控制策略进行搜索, ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- JavaScript 纯粹对象
JavaScript 纯粹对象 1.定义: 通过 "{}" 或者 "new Object" 创建的对象,像new Date(),new String()都不是纯 ...
- CSDN开源夏令营 基于Compiz的switcher插件设计与实现之compiz特效插件介绍及特效实现
compiz自带的特效插件不够多,也不够强大.为了更好的体验compiz的特效,我们能够安装特效插件,在终端输入命令:sudo apt-get install compiz-plugins就能够下载特 ...
- eclipse 如何修改maven插件本地仓库jar包默认存储位置
eclipse 如何修改maven插件本地仓库jar包默认存储位置 CreateTime--2018年4月18日11:04:47 Author:Marydon 1.更改eclipse的maven本 ...
- 从Java的堆栈到Equals和==的比較
认识Java中堆和栈 栈与堆都是Java用来在Ram中存放数据的地方. 与C++不同.Java自己主动管理栈和堆,程序猿不能直接地设置栈或堆. Java的堆是一个执行时数据区,类的对象从中分配空间.这 ...
- assert语句(assert用来判断语句的真假)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #assert语句(assert用来判断语句的真假) #案例 mylist=[ ...
- HTML+CSS浏览器兼容性问题
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 ...