灵活的等比例缩放图像类，基于MooTools

By Rainbow on // Demos & Downloads // 2806 Views+ // (0) Comments

在本教程中，我们将解释如何按比例调整图像。

当前流行的就是使用JavaScript 库（MooTools,jQuery,ExtJS, script.aculo.us,YUI）来实现一些效果，
当然我今天的例子也是使用当前流行的MooTools来实现的。我把它写成MooTools Class形式是为了程序的灵活性和可扩展性。

Resize-Images

实现思路

我们将使用一<img />标签来调整图像。图像的大小按比例调整是很简单的任务，但最重要的是如何正确的计算图像大小。

首先，你应该定义bounding box的大小（图片的最大尺寸），比方说，这将是200 × 200像素：

bounding-box

我们实际图片的大小是(size 500×313 pixels):

picture

我们调整后的效果，应该是这样的：

resized-image

如图所示的等比例调整图像以后，我们看到的图片依然好看。

现在让我们来讨论如何实现这一点。为了保证代码的可移植，我们最好是创建一个独立的函数。

我们需要认真考虑函数的需求，函数的输入参数是：maxW，maxH（这些参数设置边框大小）和currW，currH（这些参数包含当前或者是原始图像的大小。我们的样本图片是500 × 313像素）。

该函数将计算大小和返回一个数组，其中包含两个值。函数的用法是：

1
2

var newSize = scaleSize(200, 200, 500, 313);
alert('New Width: ' + newSize[0] + ', New Height: ' + newSize[1]);

现在让我们来实现scaleSize函数的算法。道理很简单:

For width: currH / currH / currW;

For height: currW * currH / currW;

你会发现currH / currW 在公式中重复计算了两次。这是一个高宽比。所以，下面这个函数才是的实际执行情况： 

1
2
3
4
5
6
7
8
9
10
11

function scaleSize(maxW, maxH, currW, currH){
      var ratio = currH / currW;
      if(currW >= maxW){
            currW = maxW;
            currH = currW * ratio;
      } else >if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
      }
      return [currW, currH];
}

关键问题已成功解决，那我们看一下完整的例子和代码吧.

Demo 演示

The HTML Code :

1
2
3
4
5
6
7
8
9
10
11
12
13

<h2>Resize Images Proportionally</h2>
	<div class="controls">
		<ul>
			<li><a href="#" rel="zoomOut" title="图片缩小">-</a></li>
			<li><a href="#" rel="zoomIn" title="图片放大">+</a></li>
			<li><a href="#" rel="reset" title="恢复到原图大小">重置</a></li>
            <li><a href="#" rel="resizeProportionally" title="按比例把图片调整到200x200">按比例调整到200x200</a></li>
		</ul>
	</div>
    <div class="clear"></div>
    <div class="picture-frame">
      <img src="picture-1.jpg" id="image" alt="Sample Image" height="313" width="500">
    </div>

The Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.clear {
	height: 1px;
	clear: both;
	font-size: 0;
	line-height: 0;
}
 
.picture-frame {
	background: #FFFFFF;
	border: 1px solid #DEDBD2;
	padding: 5px;
	float: left;
}
.picture-frame img { float: left; }
.controls {
	clear: both;
	float: left;
	margin: 20px 0;
 
}
.controls ul, .controls ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.controls ul, .controls ul li, .controls ul li a {
	float: left;
	display: inline;
}
.controls ul li {
	margin-right: 3px;
}	
.controls ul li a {
	padding: 4px 8px;
	background: #0a8ECC;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 15px; 
	text-decoration: none;
}
.controls ul li a:hover {
	background: #8FCB2F;
 
}

The MooTools JavaScript 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

var ResizeImage=new Class({
	Implements: [Options],
	//these are the default options
    options: {
		maxW:200,
		maxH:200       
    },					   
	initialize: function(img,z,options) {
        this.setOptions(options);
	    this.img = $(img);
	    this.z =$$(z);
 
	    this.setResize(this.z,this.img);
    },
	setResize:function(z,img){
	    //获取原始图片大小的参数
	    var initW = img.width, initH = img.height;
		//zoomOut,zoomIn
	    var newW = initW, newH = 0;
		//图片比例初始化参数
	    var maxW=this.options.maxW,maxH=this.options.maxH;
		//调用比例函数
	    var newSize = this.scaleSize(maxW,maxH,initW,initH);
	    //执行相应的动作
        $each(z, function(el, i){
            el.addEvent('click', function(e){
                e = new Event(e).stop();
				switch(el.rel){
					case 'zoomOut':
						newW -= 20; 
						break;
					case 'zoomIn':
						newW += 20;
						break;
					case 'resizeProportionally':
						img.width = newSize[0];
						img.height = newSize[1];
						return;
					default:
						newW = initW;		            
				}	
				var ratio = initH / initW;
				newH = newW * ratio;
				img.width = newW;
				img.height = newH;
            });
        });						
	},
	//比例函数
	scaleSize: function(maxW,maxH,currW,currH){
		var ratio = currH / currW;
		if(currW >= maxW){
			currW = maxW;
			currH = currW * ratio;
		} else if(currH >= maxH){
			currH = maxH;
			currW = currH / ratio;
		}
		return [currW, currH];
    }
 
});
 
window.addEvent('domready', function() {
 
		new ResizeImage('image','.controls li a');							  
 
});

 

Demo 演示

 

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计