blear.ui.img-preview

1Introduction

2Example

var ImgPreview = require('blear.ui.img-preview');

new ImgPreview(options);

3Static

3.1.defaults

默认配置。

3.2.defaults.el

  • 类型：Element | String
  • 说明：容器元素，不是图片元素。

3.3.defaults.extension

_ 类型：String

  • 说明：允许的扩展名
  • 默认：".png,.jpg,.jpeg,.gif,.bmp"

3.4.defaults.maxWidth

_ 类型：Number

  • 说明：预览区域的最大宽度
  • 默认：1100

3.5.defaults.maxHeight

_ 类型：Number

  • 说明：预览区域的最大高度
  • 默认：800

3.6.defaults.onUpload

_ 类型：Function

  • 说明：不支持本地预览的浏览器采用选择图片后自动上传图片的函数
  • 默认：onUpload(fileInputEl, done){ done(null, "url"); }

4new ImgPreview(options)

实例化一个本地图片预览，options 默认值为 .defaults。

5Prototype

原型属性、方法

5.1#getImageEl(): imgEl

获取预览的图片节点。

5.1.1imgEl

  • 类型：HTMLImageElement
  • 说明：图片元素

5.2#preview(fileInputEl, [callback](err)): this

获取预览的图片节点。发起新的预览指令后，会重置当前旋转角度、缩放倍数。

5.2.1fileInputEl

  • 类型：input:file 元素
  • 说明：文件选择器

5.2.2callback

  • 类型：Function
  • 说明：预览后回调

5.2.3callback: err

  • 类型：Error | Null
  • 说明：如果有错误的话

5.3#rotate(rotation): this

在当前情况旋转一定角度。

5.3.1rotaion

  • 类型：Number
  • 说明：旋转角度

5.4#getRotation(): rotation

获取当前旋转的角度

5.4.1rotaion

  • 类型：Number
  • 说明：旋转角度

5.5#scale(scale): this

获取当前旋转的角度

5.5.1scale

  • 类型：Number
  • 说明：缩放倍数

5.6#getScale(): scale

获取当前旋转的角度

5.6.1scale

  • 类型：Number
  • 说明：缩放倍数

5.7#reset(): this

重置为初始状态。

6Events

6.1beforeLoading()

图片加载之前触发。

6.2beforeUpload()

图片上传之前触发。

6.3afterUpload()

图片上传之后触发。

6.4afterLoading()

图片加载之后触发。

6.5success()

预览成功触发。

6.6error()

预览失败（包括图片加载错误、图片上传错误等）触发。

7Dependencies

8Reference