灵活的等比例缩放图像类,基于MooTools
在本教程中,我们将解释如何按比例调整图像。
当前流行的就是使用JavaScript 库(MooTools,jQuery,ExtJS, script.aculo.us,YUI)来实现一些效果,
当然我今天的例子也是使用当前流行的MooTools来实现的。我把它写成MooTools Class形式是为了程序的灵活性和可扩展性。
实现思路
我们将使用一<img />标签来调整图像。图像的大小按比例调整是很简单的任务,但最重要的是如何正确的计算图像大小。
首先,你应该定义bounding box的大小(图片的最大尺寸),比方说,这将是200 × 200像素:
我们实际图片的大小是(size 500×313 pixels):
我们调整后的效果,应该是这样的:
如图所示的等比例调整图像以后,我们看到的图片依然好看。
现在让我们来讨论如何实现这一点。为了保证代码的可移植,我们最好是创建一个独立的函数。
我们需要认真考虑函数的需求,函数的输入参数是: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]; } |
关键问题已成功解决,那我们看一下完整的例子和代码吧.
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'); }); |
文章评论 已经有 0 条评论!