手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:onload

图片自动缩放

图片的大小在不受控制的时候,我们不得不写函数来进行控制,依稀记得目前所有的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