图片的大小在不受控制的时候，我们不得不写函数来进行控制，依稀记得目前所有的jQuery图片处理函数里都有类似的函数了。但我在看到网上有人写了这个resize函数之后。不禁还是拿回来加工处理一下。以便以后随时可用。
函数如下：
JavaScript代码
- var MAX_WIDTH = 100;
- var MAX_HEIGHT = 75;
- function resizeImage( source_image , max_width , max_height){
- var image = new Image();
- image.src = source_image.src;
- if (!max_width || parseInt(max_width) <= 0){
- max_width = MAX_WIDTH;
- }
- if (!max_height || parseInt(max_height) <= 0){
- max_height = MAX_HEIGHT;
- }
- //开始检查图片
- if(image.width > 0 && image.height > 0 ){
- var image_rate = 1;
- if( (max_width / image.width) < (max_height / image.height)){
- image_rate = max_width / image.width ;
- }else{
- image_rate = max_height / image.height ;
- }
- if ( image_rate <= 1){
- source_image.width = image.width * image_rate;
- source_image.height = image.height * image_rate;
- }
- }
- }
用法很简单，js代码在文件头部加载后，如果遇到有图片需要缩放的，直接在<img>标签里加上：onload="resizeImage(this,300,200);"这样的代码。就可以自动缩小了。
目前并没有加上放大。
当然，我之所有转载并优化这个函数，是因为我想用在jQuery里面的。在使用jQuery的时候，必须把代码放在footer里才行。
代码如下：
JavaScript代码
- $('img[@class=test]').load(function(){
- resizeImage(this,300,200)
- })
- //[@class=test]代表了凡是图片的class是为test的，都将执行这个“自动缩放”函数，当然你也可以用其他的来代替，比如[@name=test]，则代表了如果img标签里，name=test的图片都将执行这个图片缩放程序。
放大等以后有空再写，本来想写成jQuery的插件的。可是想想好象意义不大。。。