# ImageCropper

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

## Code scaffolding

Run `ng generate component component-name --project image-cropper` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project image-cropper`.
> Note: Don't forget to add `--project image-cropper` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build image-cropper` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build image-cropper`, go to the dist folder `cd dist/image-cropper` and run `npm publish`.

## Running unit tests

Run `ng test image-cropper` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).


## API
可以选择图片上传方式，`imageChangedEvent`，`imageBase64`，`imageFile`
### Inputs
|  Name                      | Type      | Default      | Description     |
| `imageChangedEvent`        | FileEvent |              | input file文件上传后的值 |
| `imageFile`                | Blob(File)|              | 文件           |
| `imageBase64`              | string    |              | base64格式的图片值 |
| `imageURL`                 | string    |              | 图片路径 |
| `format`                   | string    | png          | 生成的图片格式 (png, jpeg, webp, bmp, ico) |
| `aspectRatio`              | number    | 1 / 1        | 裁剪长宽比例 width / height |
| `maintainAspectRatio`      | boolean   | true         | 是否保持默认比例 |
| `containWithinAspectRatio` | boolean   | false        | 是否在没填满周围填充|
| `resizeToWidth`            | number    | 0 (disabled) | 裁切后的宽 |
| `resizeToHeight`           | number    | 0 (disabled) | 裁切后的高 (如果宽设定了 不生效))  |
| `cropperMinWidth`          | number    | 0 (disabled) | 裁剪器的宽度  |
| `cropperMinHeight`         | number    | 0 (disabled) | 裁剪器的高度 (保持比例为true 不生效) |
| `roundCropper`             | boolean   | true         | 裁剪器展示形状是否为圆形 |
| `imageQuality`             | number    | 92           | 图片质量(jpeg,webp生效) |
| `autoCrop`                 | boolean   | true         | 是否每次裁剪都发出一个图像 |
| `alignImage`               | 'left' or 'center' | 'center' | 图片对齐方式 |
| `backgroundColor`          | string    |              | 设置背景色|
| `disabled`                 | boolean   | false        | 是否禁用 |
| `canvasRotation`           | number    | 0            | 旋转画布角度 (1 = 90deg, 2 = 180deg...) |
| `transform`                | ImageTransform   | {}    | 翻转，旋转和缩放图像 |
| `loadImageErrorText`       | sting     | 图片加载错误  | 图片加载错误提示内容

### Outputs
| Name                    | Type              | Description |
| `imageCropped`          | ImageCroppedEvent | 裁剪结果 |
| `imageLoaded`           | void              | 图片加载完成 |
| `cropperReady`          | Dimensions        | 裁剪区域初始化完成 |
| `startCropImage`        | void              | 开始裁剪 |
| `loadImageFailed`       | void              | 图片加载失败 |

### Methods
| Name                    | Returns           | Description |
| `crop`                  | ImageCroppedEvent | 裁剪(autoCrop:false时使用) |

### Interfaces
#### CropperPosition
| Property | Type   | Description |
| x1       | number | X轴第一个坐标 |
| y1       | number | Y轴第一个坐标 |
| x2       | number | X轴第二个坐标 |
| y2       | number | Y轴第二个坐标 |

#### ImageTransform
| Property | Type    | Description |
| scale    | number  | 缩放比例 |
| rotate   | number  | 旋转角度 1 = 90deg |
| flipH    | boolean | 水平翻转 |
| flipV    | boolean | 垂直翻转 |

#### ImageCroppedEvent
| Property              | Type            | Description |
| base64                | string          | 裁剪后图片的base64值 |
| width                 | number          | 裁剪后图片宽度 |
| height                | number          | 裁剪后图片高度 |
| cropperPosition       | CropperPosition | 裁剪后裁剪区相对于图片位置 |
| imagePosition         | CropperPosition | 裁剪后相对于原图片位置 |
| offsetImagePosition   | CropperPosition | containWithinAspectRatio为真时，裁剪器相对于原始图像的位置 |