✂ A simple image cropper for Wechat Miniprogram

Usage

Get wx-tailor on NPM

npm i -S wx-tailor --production

Include wx-tailor in <your page>.json

{
  "usingComponents": {
    "tailor": "wx-tailor"
  }
}

Using wx-tailor in <your page>.wxml

<tailor src="{{imageSrc}}" />

Attribute

| Attribute | Description | Type | Accepted Values | Default | | --- | --- | --- | --- | --- | | width | width to be cropped(expect rpx, px, vw or vh) | String | -- | 400rpx | | height | height to be cropped(expect rpx, px, vw or vh) | String | -- | 400rpx | | src | image resouce to be cropped(expect wechat's temporary file path) | String | -- | -- | | cancelText | text content of cancel button | String | -- | 取消 | | confirmText | text content of confirm button | String | -- | 确定 | | cancelColor | text color of cancel button | String | -- | #000000 | | confirmColor | text color of confirm button | String | -- | #FFFFFF | | cancelBgColor | background color of cancel button | String | -- | #FFFFFF | | confirmBgColor | background color of confirm button | String | -- | #09BB07 |

Events

| Event Name | Description | Parameters | | --- | --- | --- | | cancel | triggers when the cancel button is clicked | -- | | confirm | triggers when the confirm button is clicked | wechat's temporary file path of cropped image | | error | triggers when error occurred | details of the error |