@farris/ui-image-cropper v0.0.1

ImageCropper

This library was generated with 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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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为真时，裁剪器相对于原始图像的位置 |