分类: Javascript
作者: gouki

图片的大小在不受控制的时候,我们不得不写函数来进行控制,依稀记得目前所有的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的插件的。可是想想好象意义不大。。。

标签: image, onload, autoresize, rate

评论作者: gouki
引用 kind 说过的话:
谢谢. 国外zood的图片放大代码开发了很多种,都是商业用途的, 这种代码很实用,二次开发的应用市场价值较大。
象这种小函数国内也有很多人写,只是写了都是自己用,没有公布而己
评论作者: kind
谢谢. 国外zood的图片放大代码开发了很多种,都是商业用途的, 这种代码很实用,二次开发的应用市场价值较大。
评论作者: gouki
引用 kind 说过的话:
放大效果,如果放在kindover.com上效果会很好,就犹如ioffer.com 效果一样。
很多类似代码很繁杂,你的很精练。

你的广告很有特色,所以我保留了
评论作者: kind
放大效果,如果放在kindover.com上效果会很好,就犹如ioffer.com 效果一样。
很多类似代码很繁杂,你的很精练。
评论作者: gouki
呵呵。都是为了自己使用的
评论作者: aaxron
你这个函数不错,顶下博主.
评论作者: la
我只是来和你说一下,广告点过了,此留言与此篇文章无关