介绍
ng2-image-cropper 是一个 Angular2 的图片裁切插件，可用于选择和裁切图像。它支持自定义视图，例如裁剪矩形和圆形。
在本文中，我将指导您如何使用 npm 包 ng2-image-cropper ，并提供相应的示例代码。阅读本文将使您了解如何使用这个强大的 npm 包，并完全掌握这个功能。
步骤
1. 安装 ng2-image-cropper
您可以通过运行以下命令来安装 ng2-image-cropper：
npm install ng2-image-cropper --save
2. 导入模块
在你的 Angular2 项目中，你需要在 app.module.ts 文件中导入 ng2-image-cropper 模块。您可以使用以下代码导入模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------ - ---- -------------------- ----------- -------- --------------- -------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
此时，您已经成功导入了 ng2-image-cropper 模块。
3. 添加组件
在您的项目中，您需要添加一个组件。您可以使用以下代码添加组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------------
------------
--------- -----------
--------- -
-----
------ ----------- ---------------------------------- --
--- --
---- -------------------- -------------------- --
------- ------------------------------
--------------
---------------------------------------
----------------------------
---------------- - --
---------------------
------------
-------------------
-------------------------------------
-----------------------------
-------------------------------
-------------------------------------
-----------------
------
-
--
------ ----- ------------ -
------------------ --- - ---
------------- --- - ---
--------- ------- - ------
---------------------- ----- ---- -
---------------------- - ------
-
------------------- ------------------ -
----------------- - -------------
-
------------- -
-- ---- -------
-
-------------- -
-- ------- -----
-
----------------- -
-- ---- -------
-
-------- -
-- ------ ------ ------- -----
-
-
在这个组件里，您将看到上传文件，图片裁剪，并且准备上传的相关代码。这个组件是 ng2-image-cropper 的实力，您可以根据需要添加或删除某些组件，并根据应用需求来自定义相关视图。
4. 使用 ng2-image-cropper
到此为止，您的 ng2-image-cropper 已准备就绪，并可以使用模板代码实现自定义视图。您可以使用以下代码使用 ng2-image-cropper 将图像裁剪成您所需的大小和宽高比：
-- -------------------- ---- ------- -------------- --------------------------------------- ---------------------------- ---------------- - -- --------------------- ------------ ------------------- ------------------------------------- ----------------------------- ------------------------------- ------------------------------------- -----------------
5. 图片处理
在图片处理结束时，您可以使用回调函数，将裁剪后的图像上传到服务器。这个回调函数将接收裁剪后的图像数据，您可以选择将它转换为格式如 base64 等的其他数据格式。
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
}
结论
通过本文，您已经学习了如何使用 npm 包 ng2-image-cropper，以帮助您实现图像裁剪的功能。通过本文的学习，您将更深入地了解这个非常强大的 npm 包，并且能够将其用于您的应用开发过程中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556cf81e8991b448d3a49