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

英文原文：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

转载于:https://www.cnblogs.com/JoannaQ/p/3269292.html