https://github.com/IFmiss/wx-cropper
:scissors: 微信小程序 图片裁剪工具，简单易用
https://github.com/IFmiss/wx-cropper
cropper we-cropper wecropper weixin weixincropper wui wxcropper
Last synced: about 1 month ago
JSON representation
:scissors: 微信小程序 图片裁剪工具，简单易用
- Host: GitHub
- URL: https://github.com/IFmiss/wx-cropper
- Owner: IFmiss
- License: mit
- Created: 2017-09-24T08:13:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-10T14:28:37.000Z (about 1 year ago)
- Last Synced: 2025-03-12T22:06:31.499Z (2 months ago)
- Topics: cropper, we-cropper, wecropper, weixin, weixincropper, wui, wxcropper
- Language: JavaScript
- Homepage:
- Size: 5.9 MB
- Stars: 342
- Watchers: 8
- Forks: 116
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## wx-cropper
基于原生的微信小程序的裁剪组件
### 引入
支持npm包管理的模式项目目录下执行
```code
npm i @dw/wx-cropper
```
也可以直接使用项目中的wx-cropper文件夹的文件，放到自己的项目中去
### 使用
在使用的页面的.json文件中注册
```json
{
"usingComponents": {
"my-cropper": "@dw/wx-cropper"
}
}
```
注册之后在使用的wxml的文件中引入该组件
```code
```
### 参数配置
#### `close`: 事件 参数为img, 在点击关闭的时候没有这个参数，只有在生成图片的时候才有
```ts
path: string;
width: number;
height: number;
```
```code
hideCut () {
this.setData({
showCropper: false
})
const img = arguments[0].detail
if (img && img.path) {
console.log(img)
this.setData({
imageInfo: img
})
}
}
```
#### `cutRatio` 初始化的裁剪比例
```js
/**
* @type number
* @description 初始化的裁剪比例
* @example 0 默认初始化的裁剪区域宽高为图片的宽高，且裁剪比例不固定
* @example 0.5 宽高比例固定，且宽和高的比例为 1 : 2 的比例
* @example 2 宽高比例固定，且宽和高的比例为 2 : 1 的比例
*/
```
#### `cropperRatio` 组件裁剪显示区域的最大比例
```js
/**
* @type number
* @description 组件裁剪显示区域的最大比例，如果裁剪的图片过长，则做限制，默认最大宽高比例为 宽640 / 高960 (宽高比例)
* @example 1 如果CROPPER_WIDTH宽度是720px，那么裁剪区域的高度也就是 CROPPER_WIDTH / cropperRatio 为 720px;
*/
```
#### `imageSrc` 需要裁剪的图片地址 支持本地和线上
#### `cropperWidth` 裁剪区域的宽度 默认720 居中显示
#### `minCropperW` 裁剪区域最小宽度， 如果是等比例 按照最短的计算
#### 裁剪区域固定宽高
```js
```
#### 不固定比例
