在前端开发中，常常需要对图片进行裁剪以满足不同的需求。这时候，使用现成的 npm 包能够事半功倍。本文将介绍如何使用 npm 包 ng2-img-cropper-mm420 实现图片裁剪效果。
1. 安装
安装 ng2-img-cropper-mm420，可以使用 npm 命令：
npm install ng2-img-cropper-mm420 --save
2. 使用
导入 ImgCropperComponent 组件，并在模板中使用该组件来实现图片裁剪功能。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------- --------------- - ---- ------------------------
------------
--------- --------------------
------------ --------------------------------
--
------ ----- --------------------- -
------ ---------------- ----------------
------ ------------- -------
------ -------------- -------
------ ------ ----
------------- -
-------------------- - --- ------------------
-------------------------- - ----
--------------------------- - ----
---------- - ---
-
--------------- ------- -
------------------ - ------------- - -----------
----------------- - ------------ - ------------
--------------------
-
-在模板中使用 ImgCropperComponent 组件，设置对应的图片路径并绑定传回来的参数。
<img-cropper [image]="data1" [settings]="cropperSettings" (onCrop)="cropped($event)"> </img-cropper> <div> <h3>Cropped Image:</h3> <img [src]="data1.image" [width]="croppedWidth"> </div>
3. 学习和指导
使用 ng2-img-cropper-mm420 可以很方便地实现图片的裁剪功能，在前端开发中是一种很常见的需要。掌握使用 npm 包来实现图片裁剪的基本原理和方法，并能够熟练应用于自己的开发中，将有助于提高工作效率。
下面是一个完整的示例代码，可以用来体验、学习和指导：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------------- --------------- - ---- ------------------------
------------
--------- --------------------
------------ --------------------------------
--
------ ----- --------------------- -
------ ---------------- ----------------
------ ------------- -------
------ -------------- -------
------ ------ ----
------------- -
-------------------- - --- ------------------
-------------------------- - ----
--------------------------- - ----
---------- - ---
-
--------------- ------- -
------------------ - ------------- - -----------
----------------- - ------------ - ------------
--------------------
-
--- -------------------- ---- -------
-----
------------ --------------- ---------------------------- ---------------------------
--------------
-----
----------- -----------
---- ------------------- -----------------------
------
------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566fc81e8991b448e3408