AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js 缩放图片

2016-05-10 1547
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

使用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

文章标签：
JavaScript
前端开发
关键词：
JavaScript图片
黄威的世界
目录
相关文章
刘志辉~
|
2月前
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
刘志辉~
86 1
杨校
|
4月前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例手动切换轮播图片
杨老师课堂之JavaScript案例手动切换轮播图片
杨校
32 2
杨校
|
4月前
|
前端开发 JavaScript
杨老师课堂之JavaScript案例之自动切换轮播图片
杨老师课堂之JavaScript案例之自动切换轮播图片
杨校
29 1
游客qeoynko2nmbgk
|
8天前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
游客qeoynko2nmbgk
19 0
Yaiba123
|
2月前
|
JavaScript 前端开发
JS - 如何上传 Base64 编码的图片
本文展示了如何将Base64编码的图片在前端转换为Blob对象，并使用`FormData`上传到服务器端的方法。
Yaiba123
139 0
刘志辉~
|
2月前
|
JavaScript
js之图片上传
js之图片上传
刘志辉~
64 0
ssk-henry
|
4月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中，调试的时候，我们会使用 console.log 等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个 console.image() 呢？
ssk-henry
93 1
使用 JS 实现在浏览器控制台打印图片 console.image()
日_升
|
4月前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识： 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息，帮助用户更好地理解文档内容的属性。 2. 版权保护： 在文档中添加水印可以帮助保护内容的版权，防止他人未经授权地复制、转载或篡改内容。 3. 安全保护： 对于敏感信息或机密文档，添加水印可以帮助防止信息泄露，提高文档的安全性。 4. 提升专业性： 在一些场景下，如商业报告、合同文件等，添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝： 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
日_升
52 1
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
杨校
|
4月前
|
前端开发 JavaScript
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校
25 2