<NME> api.md
<BEF> ## API

### 构造器参数

#### id

- Type: `String`
- Default: `-`

用于手势操作的canvas组件标识符（必填）

#### targetId

- Type: `String`
- Default: ```-```

用于生成截图的canvas组件标识符（必填）

#### pixelRatio

- Type: `Number`
- Default: ```wx.getSystemInfoSync().pixelRatio```

设备像素比 （必填）

#### ctx

- Type: `Object`
- Default: `-`

自定义画布上下文，可用于 canvas2d

#### targetCtx

- Type: `Object`
- Default: `-`

自定义画布上下文，可用于 canvas2d

#### canvas

- Type: `Object`
- Default: `-`

自定义画布，当使用 canvas2d 时必填
#### width

- Type: `Number`
- Default: `-`

容器宽度，单位：px

#### height

- Type: `Number`
- Default: `-`

容器高度，单位：px

#### scale

- Type: `Number`
- Default: `2.5`

最大缩放倍数

#### src

- Type: `String`
- Default: `-`

需裁剪的图片资源

#### zoom

- Type: `Number`
- Default: `5`
- Range: 1 ~ 10

缩放系数

#### cut

- Type: `Object`
- Options: 
    - x: `Number` 裁剪框x轴起点（默认 0）
    - y: `Number` 裁剪框y轴起点（默认 0）
    - width: `Number` 裁剪框宽度（默认 画布宽度），单位：px
```javascript
    new weCropper({
      id: 'cropper',
      onReady: function (ctx) {
      	console.log(`weCropper is ready`)
      	console.log(`current canvas context: ${ctx}`)
      	wx.showToast({
      		title: '上传中',
            icon: 'loading',
            duration: 20000
      	})
      },
      onLoad: function (ctx) {
      	console.log(`picture loaded`)
        console.log(`current canvas context: ${ctx}`)
        wx.hideToast()
      },
      onBeforeDraw: function (ctx) {
      	console.log(`before canvas draw,i can do something`)
      	console.log(`current canvas context: ${ctx}`)
      	//  那就尝试在图片上加个水印吧
        ctx.setFontSize(14)
        ctx.setFillStyle('#ffffff')
- Params:
    - `ctx`: 返回当前画布的上下文
    - `instance`: 返回weCropper实例
- Example: 参考示例1-1

钩子函数：图片加载完毕后会立即执行

#### onBeforeDraw

- Type: `Function`
- Params:
    - `ctx`: 返回当前画布的上下文
    - `instance`: 返回weCropper实例
- Example: 参考示例1-1

钩子函数：在画布绘制之前执行

> 示例 1-1

```javascript
    new weCropper({
      id: 'cropper',
      onReady (ctx) {
      	console.log(`weCropper is ready`)
      	console.log(`current canvas context:`, ctx)
      	wx.showToast({
      		title: '上传中',
            icon: 'loading',
            duration: 20000
      	})
      },
      onLoad (ctx) {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        wx.hideToast()
      },
      onBeforeDraw (ctx) {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
      	//  那就尝试在图片上加个水印吧
        ctx.setFontSize(14)
        ctx.setFillStyle('#ffffff')
        ctx.fillText('@we-cropper', 265, 350)
      }
    })

```



### 方法

#### wecropper.updateCanvas()

更新画布视图

#### wecropper.pushOrign(src)

- src:
    - Type: `String`

载入图片

#### wecropper.removeImage() `v1.3.9支持` 

    new weCropper({
      id: 'cropper'
    })
    .on('ready', function (ctx) {
      console.log(`weCropper is ready`)
      console.log(`current canvas context: ${ctx}`)
      wx.showToast({
        title: '上传中',
        icon: 'loading',
        duration: 20000
      })
    })
    .on('load', function (ctx) {
      console.log(`picture loaded`)
      console.log(`current canvas context: ${ctx}`)
      wx.hideToast()
    })
    .on('beforeDraw', function (ctx) {
      console.log(`before canvas draw,i can do something`)
      console.log(`current canvas context: ${ctx}`)
      //  那就尝试在图片上加个水印吧
      ctx.setFontSize(14)
      ctx.setFillStyle('#ffffff')
> 示例 2-1

```javascript
// 通过 then 链式调用
this.wecropper.getCropperImage()
  .then((path) => {
    wx.previewImage({
      current: '', // 当前显示图片的http链接
      urls: [path] // 需要预览的图片http链接列表
    })
  })
  .catch(() => {
    console.log('获取图片地址失败，请稍后重试')
  })

// 亦可通过回调函数
this.wecropper.getCropperImage(function (path, err) {
  if (err) {
    wx.showModal({
      title: '温馨提示',
      content: err.message
    })
  } else {
    wx.previewImage({
      current: '', // 当前显示图片的http链接
      urls: [path] // 需要预览的图片http链接列表
    })
  }
})
```

#### wecropper.getCropperBase64(callback)

!> 基础库 1.9.0 开始支持，低版本需做兼容处理 

- callback:
    - Type: `Function`
    - Params:
        - `base64`: 裁剪后的图片（base64编码）
        - `err`: 异常信息
        
获取裁剪图片（base64编码）
        
#### wecropper.on(event, callback)

- event:
    - Type: `String`
    - Range: `ready、beforeImageLoad、imageLoad、beforeDraw`
    
- callback:
    - Type: `Function`
    - Params:
        - `ctx`: 返回当前画布的上下文
    - Example: 参考示例2-1
    
事件监听

#### wecropper.touchStart(e)

- e:
    - Type: `Object`

接收（手指触摸动作开始）事件对象

#### wecropper.touchMove(e)

- e:
    - Type: `Object`

接收（手指触摸后移动）事件对象

#### wecropper.touchEnd(e)

- e:
    - Type: `Object`

接收（手指触摸动作结束）事件对象


> 示例 3-1

```javascript
    new weCropper({
      id: 'cropper'
    })
    .on('ready', (ctx) => {
      console.log(`weCropper is ready`)
      console.log(`current canvas context:`, ctx)
      wx.showToast({
        title: '上传中',
        icon: 'loading',
        duration: 20000
      })
    })
    .on('load', (ctx) => {
      console.log(`picture loaded`)
      console.log(`current canvas context:`, ctx)
      wx.hideToast()
    })
    .on('beforeDraw', (ctx) => {
      console.log(`before canvas draw,i can do something`)
      console.log(`current canvas context:`, ctx)
      //  那就尝试在图片上加个水印吧
      ctx.setFontSize(14)
      ctx.setFillStyle('#ffffff')
      ctx.fillText('@we-cropper', 265, 350)
    })

```


<MSG> update docs

<DFF> @@ -89,23 +89,23 @@ canvas组件标识符
 ```javascript
     new weCropper({
       id: 'cropper',
-      onReady: function (ctx) {
+      onReady (ctx) {
       	console.log(`weCropper is ready`)
-      	console.log(`current canvas context: ${ctx}`)
+      	console.log(`current canvas context:`, ctx)
       	wx.showToast({
       		title: '上传中',
             icon: 'loading',
             duration: 20000
       	})
       },
-      onLoad: function (ctx) {
-      	console.log(`picture loaded`)
-        console.log(`current canvas context: ${ctx}`)
+      onLoad (ctx) {
+        console.log(`picture loaded`)
+        console.log(`current canvas context:`, ctx)
         wx.hideToast()
       },
-      onBeforeDraw: function (ctx) {
-      	console.log(`before canvas draw,i can do something`)
-      	console.log(`current canvas context: ${ctx}`)
+      onBeforeDraw (ctx) {
+        console.log(`before canvas draw,i can do something`)
+        console.log(`current canvas context:`, ctx)
       	//  那就尝试在图片上加个水印吧
         ctx.setFontSize(14)
         ctx.setFillStyle('#ffffff')
@@ -177,23 +177,23 @@ canvas组件标识符
     new weCropper({
       id: 'cropper'
     })
-    .on('ready', function (ctx) {
+    .on('ready', (ctx) => {
       console.log(`weCropper is ready`)
-      console.log(`current canvas context: ${ctx}`)
+      console.log(`current canvas context:`, ctx)
       wx.showToast({
         title: '上传中',
         icon: 'loading',
         duration: 20000
       })
     })
-    .on('load', function (ctx) {
+    .on('load', (ctx) => {
       console.log(`picture loaded`)
-      console.log(`current canvas context: ${ctx}`)
+      console.log(`current canvas context:`, ctx)
       wx.hideToast()
     })
-    .on('beforeDraw', function (ctx) {
+    .on('beforeDraw', (ctx) => {
       console.log(`before canvas draw,i can do something`)
-      console.log(`current canvas context: ${ctx}`)
+      console.log(`current canvas context:`, ctx)
       //  那就尝试在图片上加个水印吧
       ctx.setFontSize(14)
       ctx.setFillStyle('#ffffff')

update docs