使用JavaScript 和 CSS 实现图像缩放和剪裁(转)-白红宇

使用JavaScript 和 CSS 实现图像缩放和剪裁(转)

阅读量：6916 次

发布时间：2019-06-27

本文共 2373 字，大约阅读时间需要 7 分钟。

英文原文：

在页面上需要裁减和缩放一张图片是一个常见问题。缩放图片比较简单的方法是使用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

你可能感兴趣的文章