blear.ui.mobile-img-preview-clip-upload

1Introduction

2Example

var ImgPreviewClipUpload = require('blear.ui.mobile-img-preview-clip-upload');

var ipcu = new ImgPreviewClipUpload();

ipcu.start();
  • 拖拽：单指拖拽
  • 缩放：双指扩张与收起
  • 旋转：双指转动

3Static

3.1.defaults

  • 类型：Object
  • 说明：默认配置

3.2.defaults.clipWidth

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

3.3.defaults.clipHeight

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

3.4.defaults.expectWidth

  • 类型：Number
  • 说明：裁剪区域的宽度
  • 默认：800

3.5.defaults.expectWidth

  • 类型：Number
  • 说明：裁剪区域的宽度
  • 默认：800

3.6.defaults.fileName

  • 类型：string
  • 说明：上传的文件键名
  • 默认：file

3.7.defaults.fileAccept

  • 类型：string
  • 说明：接受的文件类型
  • 默认：image/png,image/jpg,image/jpeg,image/bmp

3.8.defaults.fileExtension

  • 类型：string
  • 说明：接受的文件后缀
  • 默认：.png,.jpg,.jpeg,.bmp

3.9.defaults.drawQuality

  • 类型：number
  • 说明：绘制的图片质量
  • 默认：0.8

3.10.defaults.drawType

  • 类型：string
  • 说明：绘制的图片类型
  • 默认：image/jpeg

3.11.defaults.maskOptions

  • 类型：object
  • 说明：遮罩配置，参考 blear.ui.mask
  • 默认：
    {
    bgColor: '#000',
    opacity: 0.85
}

3.12.defaults.coverColor

  • 类型：string
  • 说明：图片覆盖的颜色
  • 默认：#000

3.13.defaults.coverOpacity

  • 类型：number
  • 说明：图片覆盖的不透明度
  • 默认：0.382

3.14.defaults.onUpload

  • 类型：function
  • 说明：图片覆盖的不透明度
  • 默认：
    function onUpload(fileEl, blob, callback) {
  callback(new Error('未配置 BLOB 上传'));
}

4new ImgPreviewClipUpload(options)

实例化一个手机端图片预览裁剪上传的 UI 组件，options 为入参，默认值为 .defaults。

5Prototype

5.1#start()

开始启动，会自动弹出选择文件对话框。

5.2#destroy()

销毁实例。

6Events

6.1error(err)

出错时触发。

6.1.1err

  • 类型：`Error``
  • 说明：错误对象

6.2beforeLoad()

加载图片之前触发。

6.3afterLoad()

加载图片之后触发。

6.4beforeUpload()

上传图片之前触发。

6.5afterUpload()

上传图片之后触发。

7Dependencies

8Reference