英文原文:Scale and Crop an Image using Javascript and CSS
在页面上需要裁减和缩放一张图片是一个常见问题。缩放图片比较简单的方法是使用image的hight和width属性。同样地,裁剪图片可以通过将图像 设置为元素背景并设置元素的高度和宽度来完成。无论如何,缩放和裁剪图像都稍微复杂了一点。如果这需要经常做,还是把图像的裁剪和缩放交给一个类 (class)好一些。为此,我写了这个裁剪缩放器(Cropenscaler)。
思路是这样的:创建一个特定大小的div元素,这是一个嵌套的div,在其中显示相对定位的图像。我发现定义默认图像大小和裁剪位置的图像数据哈希表非常有用。这些数值可以在帧建立的时候进行调整,这时候,无所谓结果帧如何缩放,图像都被定位于同样的位置。
CSS Classes
让我们先检验一下必要的 CSS 类:
.croppenscaler {
display: inline-block;
overflow: hidden;
}
.croppenscaler img {
position: relative;
border: none;
}
Croppenscaler 类:
下面的Javascript使用了Prototype框架,但使用JQuery或别的javascript库也能完成同样的事情。
var imageData = {
kittah: { width:900, top:-175, left:-165, url: '/blogs/assets/jcato/images/Kittah.jpg' },
}; var Croppenscaler = Class.create();
Croppenscaler.prototype = {
initialize: function(options) {
var image = imageData[options.image];
this.url = image.url;
this.frameHeight = options.height || 400;
this.frameWidth = options.width || 300; var scale = this.frameWidth / 300; this.imageWidth = (image.width) * scale;
this.positionTop = (image.top) * scale;
this.positionLeft = (image.left) * scale;
}, buildFrame: function() {
var img = new Element('img',{src:this.url, 'class':'zoom'});
img.setStyle({
width: this.imageWidth+'px',
top: this.positionTop+'px',
left: this.positionLeft+'px',
}); var frame = new Element('div',{'class':'croppenscaler'});
frame.update(img);
frame.setStyle({
height:this.frameHeight+'px',
width:this.frameWidth+'px',
});
return frame;
},
};
这个类有两个函数。构 造器为结果帧获取了选项哈希表;图像的关键帧和帧的高度与宽度。在这个版本中,构造器引用了imageData哈希表来获取图像细节用于显示,但他们也能 通过传递参数到函数中同样实现。重要的是构造器能够访问到帧的高度与宽度。当以默认宽度显示的时候,则为默认的图像宽度和top与left属性(图像左上 角的位置
buildFrame() 函数计算了尺寸并使用他们构建了帧div。使用嵌套的图像来缩放以适应这个帧,后进行定位同样来适应这个缩放。
接下来使用这个类,使用至少包括一个图像关键帧、可选高度和宽度的哈希表创建新的Croppenscaler ,调用buildFrame()函数,将结果元素插入到页面上。
var loadImages = function() {
$('cats').insert(new Croppenscaler({image:'kittah'}).buildFrame());
$('cats').insert(new Croppenscaler({image:'kittah',height:300}).buildFrame());
$('cats').insert(new Croppenscaler({image:'kittah',width:400,height:250}).buildFrame());
$('cats').insert(new Croppenscaler({image:'kittah',width:200,height:300}).buildFrame());
$('cats').insert(new Croppenscaler({image:'kittah',width:100,height:150}).buildFrame());
}
面的代码将产生下面这群猫(的图像效果)。
转载自:http://www.oschina.net/translate/both_scale_and_crop_an_image_using_javascript_and_css