控制图片大小的方法有很多,在本文将为大家详细介绍下使用 js 实现缩放图片,核心代码如下,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
缩放图片脚本分享
- <!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;
- }
来源: