手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

图片自动缩放

首页 > Javascript >

图片的大小在不受控制的时候,我们不得不写函数来进行控制,依稀记得目前所有的jQuery图片处理函数里都有类似的函数了。但我在看到网上有人写了这个resize函数之后。不禁还是拿回来加工处理一下。以便以后随时可用。
函数如下:

JavaScript代码
  1. var MAX_WIDTH   = 100;  
  2. var MAX_HEIGHT  = 75;  
  3. function resizeImage( source_image , max_width , max_height){  
  4.     var image = new Image();  
  5.     image.src = source_image.src;  
  6.     if (!max_width || parseInt(max_width) <= 0){  
  7.         max_width = MAX_WIDTH;  
  8.     }  
  9.     if (!max_height || parseInt(max_height) <= 0){  
  10.         max_height = MAX_HEIGHT;  
  11.     }  
  12.     //开始检查图片  
  13.     if(image.width > 0 && image.height > 0 ){  
  14.         var image_rate = 1;  
  15.         if( (max_width / image.width) < (max_height / image.height)){  
  16.             image_rate = max_width / image.width ;  
  17.         }else{  
  18.             image_rate = max_height / image.height ;  
  19.         }  
  20.         if ( image_rate <= 1){  
  21.             source_image.width  = image.width * image_rate;  
  22.             source_image.height = image.height * image_rate;  
  23.         }  
  24.     }  
  25.       
  26. }  

用法很简单,js代码在文件头部加载后,如果遇到有图片需要缩放的,直接在<img>标签里加上:onload="resizeImage(this,300,200);"这样的代码。就可以自动缩小了。
目前并没有加上放大。
当然,我之所有转载并优化这个函数,是因为我想用在jQuery里面的。在使用jQuery的时候,必须把代码放在footer里才行。
代码如下:

JavaScript代码
  1. $('img[@class=test]').load(function(){  
  2.     resizeImage(this,300,200)  
  3. })  
  4. //[@class=test]代表了凡是图片的class是为test的,都将执行这个“自动缩放”函数,当然你也可以用其他的来代替,比如[@name=test],则代表了如果img标签里,name=test的图片都将执行这个图片缩放程序。  

放大等以后有空再写,本来想写成jQuery的插件的。可是想想好象意义不大。。。




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: image, onload, autoresize, rate

« 上一篇 | 下一篇 »

7条记录访客评论

引用 kind 说过的话:
谢谢. 国外zood的图片放大代码开发了很多种,都是商业用途的, 这种代码很实用,二次开发的应用市场价值较大。
象这种小函数国内也有很多人写,只是写了都是自己用,没有公布而己

Post by gouki on 2008, December 17, 1:48 PM 引用此文发表评论 #1

谢谢. 国外zood的图片放大代码开发了很多种,都是商业用途的, 这种代码很实用,二次开发的应用市场价值较大。

Post by kind on 2008, December 16, 10:44 PM 引用此文发表评论 #2

引用 kind 说过的话:
放大效果,如果放在kindover.com上效果会很好,就犹如ioffer.com 效果一样。
很多类似代码很繁杂,你的很精练。

你的广告很有特色,所以我保留了

Post by gouki on 2008, December 6, 6:01 PM 引用此文发表评论 #3

放大效果,如果放在kindover.com上效果会很好,就犹如ioffer.com 效果一样。
很多类似代码很繁杂,你的很精练。

Post by kind on 2008, December 6, 4:42 PM 引用此文发表评论 #4

呵呵。都是为了自己使用的

Post by gouki on 2008, November 21, 6:22 PM 引用此文发表评论 #5

你这个函数不错,顶下博主.

Post by aaxron on 2008, November 19, 9:55 AM 引用此文发表评论 #6

我只是来和你说一下,广告点过了,此留言与此篇文章无关

Post by la on 2008, August 31, 9:43 AM 引用此文发表评论 #7


发表评论

评论内容 (必填):