简介
ngx-cropper-2 是一个适用于 Angular 框架的图片裁剪工具，支持图像预处理、裁剪、缩放、旋转等功能。
安装
在使用 ngx-cropper-2 之前，需要先安装它。可以使用 npm 包管理工具进行安装：
npm install ngx-cropper-2
使用
1. 引入 ngx-cropper-2
引入 ngx-cropper-2 组件，可以在组件中使用。
import { CropperComponent } from 'ngx-cropper-2';2. 在组件中使用 ngx-cropper-2
在组件中声明 ngx-cropper-2 是直接使用。
<cropper [image]="image" [settings]="settings" (onCrop)="croppedImage($event)"></cropper>
image：要裁剪的图片。settings：设置裁剪区域、比例等参数。onCrop：裁剪完成后的回调函数。
3. 设置参数
在组件对象中传递参数，可以定制裁剪工具的行为。例如：
-- -------------------- ---- -------
-------- - -
--------- --
------------ --
------------- ----
-------------- ----
------------ ----
------------- ----
-------- -----
--这个 settings 对象包括以下参数：
fileSize：限制上传文件大小（MB）。aspectRatio：设置裁剪比例（width：height）。croppedWidth：设置裁剪后图片的宽度。croppedHeight：设置裁剪后图片的高度。canvasWidth：设置画布的宽度。canvasHeight：设置画布的高度。rounded：设置裁剪后的图片是否起圆角。
4. 使用示例
<cropper [image]="image" [settings]="settings" (onCrop)="croppedImage($event)"></cropper>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- -
------ ----
-------- - -
--------- --
------------ --
------------- ----
-------------- ----
------------ ----
------------- ----
-------- -----
--
------------- - -
------------------- -
-------------------
-
-总结
ngx-cropper-2 是一个非常实用的图片裁剪工具，通过上面的介绍，相信大家都已经掌握了它的使用方法。如果您有更多关于 ngx-cropper-2 的学习心得或疑问，欢迎在评论区留言与大家一起交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b28