js 缩放图片

使用JavaScript 如何缩放图片呢?

先看一下效果

 点击"缩放",效果如下:

 页面代码:

Html代码  

1.                             <span style="float:left"> <a href="javascript:com.whuang.hsj.scale22(true,'company_module_pic');">放大</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
2. <a href="javascript:com.whuang.hsj.scale22(false,'company_module_pic');">缩小</a>  
3. </span>  
4.                         <img src="/yhyc/upload/image/20141016/20141016212719_312.jpg" id="company_module_pic" alt="轮播图" width="500">  
5.                           

 说明:company_module_pic 是img标签的id

com.whuang.hsj.scale22 的实现:

Js代码  

1. /*** 
2. * 缩放图片 
3. */  
4. com.whuang.hsj.scale22=function(isBig,company_module_pic){  
5.     if (typeof company_module_pic == 'string') {  
6.         company_module_pic=com.whuang.hsj.$$id(company_module_pic);  
7.         if(company_module_pic==null ||company_module_pic==undefined){  
8.             company_module_pic=com.whuang.hsj.$$one(company_module_pic);  
9.         }  
10.     }  
11.     if(company_module_pic==null ||company_module_pic==undefined){  
12.         return;  
13.     }  
14.     var oldWidth=company_module_pic.width;  
15.     if(oldWidth==0){  
16.         return;  
17.     }  
18.     var speed33=50;  
19.     if(com.whuang.hsj.isHasValue(company_module_pic.src)){  
20.         if(isBig){  
21.             oldWidth+=speed33;  
22.         }else{  
23.             oldWidth-=speed33;  
24.         }  
25.         if(oldWidth>1300||oldWidth<400){  
26.             alert("不能再缩放了");  
27.             return;  
28.         }  
29.         company_module_pic.width=oldWidth;  
30.     }  
31.       
32.   
33. };  

 依赖的方法:

Js代码  

1. /******************************************************************************* 
2.  * by id 
3.  */  
4. com.whuang.hsj.$$id = function(name22) {  
5.     return document.getElementById(name22);  
6. };  
7. /*** 
8.  * if is radio ,please use com.whuang.hsj.$$arr 
9.  * @param name22 
10.  * @returns 
11.  */  
12. com.whuang.hsj.$$one = function(name22) {  
13.     if (com.whuang.hsj.isHasValue(name22)) {  
14.         var names222=document.getElementsByName(name22);  
15.         //alert("names222:"+names222);  
16.         //alert("typeof:"+(typeof names222 ));  
17.         var className=Object.prototype.toString.call(names222);  
18.         var boolean_isArray;  
19.         var ieHtmlCollection='[object HTMLCollection]';  
20.         if(isIEtest)//if browser is IE  
21.         {  
22.                  boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ;  
23.         }else  
24.         {  
25.                  boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]'  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;  
26.         }  
27.         if(names222){  
28.              if(boolean_isArray){  
29.                      return names222[0];  
30.              }else{  
31.                      return names222;//why add [0] ??  
32.             }  
33.         }else{  
34.             return "";  
35.         }  
36.     } else {  
37.         return "";  
38.     }  
39. };  
40. /** 
41.  * whether has value 
42.  *  
43.  * @param {Object} 
44.  *            input 
45.  */  
46. com.whuang.hsj.isHasValue = function(input) {  
47.     if (typeof input == "number" && input == "0") {  
48.         return true;  
49.     }  
50.     if(!input)  
51.     {  
52.         return false;  
53.     }  
54.     if(input==""||input==undefined||com.whuang.hsj.isWholeWhitespace(input)){  
55.         return false;  
56.     }  
57.     return true;  
58. };  
59. /** 
60.  * is whitespace entirely 
61.  *  
62.  * @param {Object} 
63.  *            inputString 
64.  */  
65. com.whuang.hsj.isWholeWhitespace = function(inputString) {  
66.     if (typeof inputString == "object") {  
67.         return inputString;  
68.     }  
69.     var bootInit = true;  
70.     if (inputString == "" || inputString == undefined) {  
71.         return false;  
72.     }  
73.     for ( var i = 0; i < inputString.length; i++) {  
74.         var c = inputString.charAt(i);  
75.         if (!com.whuang.hsj.isWhitespace(c)) {  
76.             bootInit = false;  
77.             break;  
78.         }  
79.     }  
80.     return bootInit;  
81. };  
82. com.whuang.hsj.isWhitespace = function(input) {// whether has whitespace  
83.     var whitespace = " \t\n\r";  
84.     for ( var i = 0; i < input.length; i++) {  
85.         var c = input.charAt(i);  
86.         if (whitespace.indexOf(c) >= 0) {  
87.             return true;  
88.         }  
89.     }  
90.     return false;  
91. };  

注意:

(1)com.whuang.hsj.scale22方法的第一个参数是boolean类型,必须是false或true;

第二个参数可以是img的id  ,也可以是img的name