1Introduction
- description：图片预览裁剪上传 UI
- author：ydr.me
- create：2016年06月04日14:09:36
- update：2016年06月04日14:09:36
- github：
https://github.com/blearjs/blear.ui.img-preview-clip-upload
2Example
var ImgPreviewClipUpload = require('blear.ui.img-preview-clip-upload');
new ImgPreviewClipUpload(options);
3Static
3.1.defaults
默认配置。
3.2.defaults.dialog
- 说明：对话框配置
- 类型：
Object
3.3.defaults.dialog.title
- 说明：对话框标题
- 类型：
String - 默认：
"裁剪图片并上传"
3.4.defaults.dialog.width
- 说明：对话框宽度
- 类型：
Number - 默认：
800
3.5.defaults.preview
- 说明：预览配置
- 类型：
Object
3.6.defaults.preview.width
- 说明：预览宽度
- 类型：
Number - 默认：
"auto"
3.7.defaults.preview.height
- 说明：预览高度
- 类型：
Number - 默认：
"auto"
3.8.defaults.preview.minWidth
- 说明：预览最小宽度
- 类型：
Number - 默认：
800
3.9.defaults.preview.minHeight
- 说明：预览最小高度
- 类型：
Number - 默认：
"auto"
3.10.defaults.preview.maxWidth
- 说明：预览最大宽度
- 类型：
Number - 默认：
1000
3.11.defaults.preview.maxHeight
- 说明：预览最大高度
- 类型：
Number - 默认：
800
3.12.defaults.clip
- 说明：裁剪配置
- 类型：
Object
3.13.defaults.clip.auto
- 说明：自动适配到最大居中选区
- 类型：
Boolean - 默认：
true
3.14.defaults.clip.ratio
- 说明：裁剪区域的宽高比
- 类型：
Number - 默认：
1
3.15.defaults.clip.minWidth
- 说明：裁剪的区域的最小宽度
- 类型：
Number - 默认：
100
3.16.defaults.clip.minHeight
- 说明：裁剪的区域的最小高度
- 类型：
Number - 默认：
100
3.17.defaults.clip.maxWidth
- 说明：裁剪的区域的最大宽度，0 表示无限制
- 类型：
Number - 默认：
0
3.18.defaults.clip.maxHeight
- 说明：裁剪的区域的最大高度，0 表示无限制
- 类型：
Number - 默认：
0
3.19.defaults.clip.expectWidth
- 说明：裁剪后的图片期望宽度（用于 canvas 绘制前计算）
- 类型：
Number - 默认：
800
3.20.defaults.clip.expectHeight
- 说明：裁剪后的图片期望宽度（用于 canvas 绘制前计算）
- 类型：
Number - 默认：
0
3.21.defaults.clip.minSelectionSize
- 说明：开始最小选区大小
- 类型：
Number - 默认：
10
3.22.defaults.name
- 说明：上传图片的键名
- 类型：
String - 默认：
"file"
3.23.defaults.accept
- 说明：选择图片的的接受类型
- 类型：
String - 默认：
"image/png,image/jpg,image/jpeg,image/bmp"
3.24.defaults.extension
- 说明：接受的图片扩展名
- 类型：
String - 默认：
".png,.jpg,.jpeg,.bmp"
3.25.defaults.multiple
- 说明：是否接受多图
- 类型：
Boolean - 默认：
false
3.26.defaults.drawWdith
- 说明：绘图宽度
- 类型：
Number - 默认：
100
3.27.defaults.drawHeight
- 说明：绘图高度
- 类型：
Number - 默认：
100
3.28.defaults.drawQuality
- 说明：绘图质量，小于 1
- 类型：
Number - 默认：
0.8
3.29.defaults.drawType
- 说明：绘图类型
- 类型：
String - 默认：
"image/jpeg"
3.30.defaults.onUpload
- 说明：图片上传回调
- 类型：
Function - 默认：
function (fileInputEl, blob, done) { done(new Error('未配置 BLOB 上传')); }
4new ImgPreviewClipUpload(options)
实例化一个图片预览并且上传 UI，options 默认值为 .defaults。
5Prototype
原型属性、方法
5.1#start(): this
调起上传对话框。
5.2#destroy()
销毁实例
6Events
6.1beforePreviewUpload()
预览上传之前触发。
6.2afterPreviewUpload()
预览上传之后触发。
6.3beforePreviewLoading()
预览加载之前触发。
6.4afterPreviewLoading()
预览加载之后触发。
6.5success()
预览并且裁剪并且上传成功之后触发。
6.6error()
预览或裁剪或上传失败触发。
6.7beforeBlobUpload()
裁剪之后上传之前触发。
6.8afterBlobUpload()
裁剪之后上传之后触发。
7Dependencies
- blear.core.attribute
- blear.core.event
- blear.core.layout
- blear.core.modification
- blear.core.selector
- blear.ui.dialog
- blear.ui.img-clip
- blear.ui.img-preview
- blear.ui.window
- blear.utils.canvas-content
- blear.utils.canvas-img
- blear.utils.object
8Reference
无。