blear.ui.img-clip

1Introduction

2Example

var ImgClip = require('blear.ui.img-clip');

new ImgClip(options);

3Static

3.1.defaults

3.1.1.defaults.el

  • 类型：Element | String
  • 说明：待裁剪的图片元素

3.1.2.defaults.auto

  • 类型：Boolean
  • 说明：是否自动选择最大且居中的选区
  • 默认：true

3.1.3.defaults.ratio

  • 类型：Number
  • 说明：裁剪区域宽高比
  • 默认：1，正方形

3.1.4.defaults.minWidth

  • 类型：Number
  • 说明：裁剪区域最小宽度
  • 默认：100

3.1.5.defaults.minHeight

  • 类型：Number
  • 说明：裁剪区域最小高度
  • 默认：100

3.1.6.defaults.maxWidth

  • 类型：Number
  • 说明：裁剪区域最大宽度，0 表示不限制
  • 默认：0

3.1.7.defaults.maxHeight

  • 类型：Number
  • 说明：裁剪区域最大高度，0 表示不限制
  • 默认：0

3.1.8.defaults.minSelectionSize

  • 类型：Number
  • 说明：最小的选区尺寸，即小于这个尺寸则自动释放
  • 默认：10

3.1.9.defaults.expectWidth

  • 类型：Number
  • 说明：期望裁剪的宽度，高度会等比运算，宽度优先级高于高度
  • 默认：200

3.1.10.defaults.expectHeight

  • 类型：Number
  • 说明：期望裁剪的高度，宽度会等比运算
  • 默认：0

4new ImgClip(options)

实例化一个图片裁剪，options 参数为 .defaults。

5Prototype

5.1#changeImage(url, [rotation]): this

改变图片地址，修改后会自动建立选区。

5.1.1url

  • 类型：String
  • 说明：图片地址

5.1.2rotation

  • 类型：Number
  • 说明：旋转角度，默认 0

5.2#getImage(): url

获取当前正在裁剪的图片地址。

5.2.1url

  • 类型：String
  • 说明：图片地址

5.3#getSelection(): sel

获取当前正在裁剪的图片地址。

5.3.1sel

  • 类型：Object
  • 说明：选区描述

5.3.2sel.selLeft

  • 类型：Number
  • 说明：选区左位移（sel开头的属性为选区自身属性，下同）

5.3.3sel.selTop

  • 类型：Number
  • 说明：选区上位移

5.3.4sel.selWidth

  • 类型：Number
  • 说明：选区宽度

5.3.5sel.selHeight

  • 类型：Number
  • 说明：选区高度

5.3.6sel.srcLeft

  • 类型：Number
  • 说明：选区映射的图片的左位移（src开头的属性为映射的图片属性，下同）

5.3.7sel.srcTop

  • 类型：Number
  • 说明：选区映射的图片的上位移

5.3.8sel.srcWidth

  • 类型：Number
  • 说明：选区映射的图片的宽度

5.3.9sel.srcHeight

  • 类型：Number
  • 说明：选区映射的图片的高度

5.3.10sel.drawWidth

  • 类型：Number
  • 说明：绘制的宽度（draw开头的属性为绘制 canvas 准备，下同）

5.3.11sel.drawHeight

  • 类型：Number
  • 说明：绘制的高度

5.3.12sel.drawX

  • 类型：Number
  • 说明：绘制的坐标系水平方向偏移（相对于原始左上角坐标系）

5.3.13sel.drawY

  • 类型：Number
  • 说明：绘制的坐标系垂直方向偏移（相对于原始左上角坐标系）

5.3.14sel.drawRadian

  • 类型：Number
  • 说明：绘制的坐标系旋转弧度（相对于原始左上角坐标系）

5.3.15sel.actualWidth

  • 类型：Number
  • 说明：绘制的画布实际宽度

5.3.16sel.actualWidth

  • 类型：Number
  • 说明：绘制的画布实际宽度

5.3.17sel.actualHeight

  • 类型：Number
  • 说明：绘制的画布实际高度

5.4#setSelection(sel): this

设置选区。

5.4.1sel

  • 类型：Array
  • 说明：选区的范围

5.4.2sel[0]

  • 类型：Number
  • 说明：选区左位移

5.4.3sel[1]

  • 类型：Number
  • 说明：选区上位移

5.4.4sel[2]

  • 类型：Number
  • 说明：选区宽度

5.4.5sel[3]

  • 类型：Number
  • 说明：选区高度

5.5#release(): this

释放选区。

5.6#reset(): this

重置为初始状态（释放选区并且将图片设置为空）。

5.7#destroy()

销毁实例。

6Events

6.1beforeLoading()

图片加载之前触发。

6.2afterLoading()

图片加载之后触发。

6.3error()

图片加载失败触发。

6.4beforeSelection()

选区改变之前触发。

6.5changeSelection(sel)

选区改变中触发。sel属性参考#getSelction返回值。

6.6afterSelection()

选区改变之后触发。

6.7cancelSelection()

选区取消之后触发。

7Dependencies

8Reference