介绍
ng2-img-cropper 是一个用于 Angular 2+ 项目的图片剪裁器，可以帮助我们方便地在前端进行图片裁剪和缩放操作，支持各种样式配置和事件绑定。
安装和使用
首先我们需要在项目中安装 ng2-img-cropper 包，可以使用 npm 命令进行安装：
npm install ng2-img-cropper --save
然后我们需要在模块中引入并添加 ng2-img-cropper 组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
------ - ------------------ - ---- ------------------
------ - ------------ - ---- ------------------
-----------
------------- -
-------------
--
-------- -
-------------
------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在页面中使用 ng2-img-cropper 组件，指定图片路径和裁剪区域宽高：
<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" [resizeToWidth]="320" [resizeToHeight]="240"></image-cropper>
其中，imageChangedEvent 是图片变化事件，在控制器中定义并处理，比如：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------ ------------------ --- - ---
------ ------------- --- - ---
------------- --
---------- --
------ ---------------------- ----- ---- -
---------------------- - ------
-
------ ------------------- ------------------ -
----------------- - -------------
-
------ ------------- --
------ -------------- --
------ ----------------- --
-在控制器中定义了 imageChangedEvent（图片变化事件）、croppedImage（剪裁后图片）、fileChangeEvent（文件变化事件）、imageCropped（剪裁事件）、imageLoaded（图片载入事件）、cropperReady（剪裁器 ready 事件）和 loadImageFailed（载入图片失败事件）等方法，其中 imageCropped 方法是最为重要的，它会在剪裁完成后触发，将剪裁后的图片通过 base64 格式返回，我们可以将其上传至服务器或在本地保存使用。
我们也可以通过各种属性配置组件样式和操作行为，例如：
<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" [resizeToWidth]="320" [resizeToHeight]="240" [outputType]="'blob'" [canvasWidth]="800" [canvasHeight]="600" [rotate90]="true" [autoCrop]="true" [autoCropArea]="0.7" [enforceAspectRatio]="true" [rounded]="true" [keepAspect]="true" [showCropTool]="false" [showSize]="false"></image-cropper>
在这里我们设置了：
- outputType：输出图片格式为 blob。
- canvasWidth 和 canvasHeight：剪裁器所在画布的宽和高。
- rotate90：允许在剪裁时旋转 90 度。
- autoCrop：自动进行剪裁操作。
- autoCropArea：自动剪裁的区域大小占可见区域的比例，范围为 0 到 1。
- enforceAspectRatio：强制按照指定的宽高比例进行剪裁，不允许自选。
- rounded：剪裁区域是否圆角。
- keepAspect：剪裁区域是否保持原宽高比例。
- showCropTool 和 showSize：是否显示剪裁工具和尺寸等信息。
除了这些属性外，ng2-img-cropper 还支持多种事件绑定，详见官方文档。
示例代码
控制器：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------ ------------------ --- - ---
------ ------------- --- - ---
------------- --
---------- --
------ ---------------------- ----- ---- -
---------------------- - ------
-
------ ------------------- ------------------ -
----------------- - -------------
-
------ ------------- --
------ -------------- --
------ ----------------- --
-HTML：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------
-------------
---- -------------------
------ ----------- ---------------- -----------------------------------
------
---- ----------------------
---- ---------------------------------------- ------------------------- ------------------
------
------
---- -----------------
-------------
---- -------------------
------- ---------- ------------ --------------------------------------
------- ---------- ------------ --------------------- - -------------------
------
---- ----------------------
------------ --------------------------------------- ---------------------------- ---------------- - --
--------------------- ---------------------- --------------------- ------------------- --------------------
----------------- ----------------- -------------------- --------------------------- ----------------
------------------- ---------------------- ------------------ -------------------------------------
----------------------------- ------------------------------- --------------------------------------
--------------
------
---- --------------------- ---------------------
---- -------------------- ------------------
------
------
------
------CSS：
-- -------------------- ---- ------- -------------- - ----------- ----- -------------- ----- ------- --- ----- ----- ----------- ------- -------- ----- - -------------- --- - ---------- ----- - -------------- --------- - ------- -------- -
结论
ng2-img-cropper 是一个功能强大的 Angular 2+ 图片剪裁组件，使用简单，效果出色，非常适合需要在前端进行图片处理的项目，如果你还没有尝试过，不妨在你的项目中一试，相信你会喜欢上它的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ng2-img-cropper