1. npm 包 ng2-img-cropper-custom 简介
npm 包 ng2-img-cropper-custom 是一个能够在 Angular 应用中实现图片裁剪的插件。它基于 ng2-img-cropper 进行二次封装，支持更多的可定制化样式和功能。ng2-img-cropper-custom 可以帮助开发者快速地在自己的应用中添加图片裁剪功能，提高开发效率。
2. npm 包 ng2-img-cropper-custom 使用教程
2.1 安装
要使用 npm 包 ng2-img-cropper-custom，我们首先需要在我们的项目中安装该插件。在项目根目录下打开终端，输入以下命令：
npm install --save ng2-img-cropper-custom
这个命令会把 ng2-img-cropper-custom 和其所需要的 Angular Core 依赖库都安装到我们的项目中。
2.2 引入模块
在我们的 Angular 项目中，我们需要引入 ng2-img-cropper-custom 的模块。在 Angular 的模块中引入 ng2-img-cropper-custom 的方法和引入其他 Angular 模块的方法类似。在需要使用 ng2-img-cropper-custom 的组件模块中，我们需要引入如下模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------------- - ---- -------------------------
-----------
-------- -
-------------------------
--
------------- -
-- ----
-
--在以上代码中，我们在 imports 数组中引入了 Ng2ImgCropperCustomModule，即我们刚刚安装的 ng2-img-cropper-custom 模块。通过在组件模块中引入该模块，我们就可以在组件中使用 ng2-img-cropper-custom 了。
2.3 在组件中使用 ng2-img-cropper-custom
在我们的组件模板中，我们需要定义一个裁剪区域并且绑定裁剪后的图片。示例代码如下：
<ng2-img-cropper-custom [inputImage]="imageDataUrl" [options]="cropperOptions" (output)="imageCropped($event)"> </ng2-img-cropper-custom>
在以上代码中，我们使用了 ng2-img-cropper-custom 组件创建了一个裁剪区域，其中：
inputImage: 裁剪前的图片数据，可以是 URL 地址，也可以是 Base64 编码的图片数据options: 用于设置裁剪区域的选项，如宽度、高度、比例等(output): 当用户完成裁剪并保存时，output 事件会被触发，我们需要在组件类中定义imageCropped()方法来接受处理结果。
裁剪结果会以 Base64 编码形式保存在 imageCropped(event) 的 event 参数中，我们可以将其展示在组件模板中，示例代码如下：
<img [src]="croppedImageUrl" />
在以上代码中，我们使用 Angular 的插值表达式 in [src] 展示裁剪后的图片。
以上是一个简单的 ng2-img-cropper-custom 模块使用的示例，更详细的使用方法可以参考此项目的 GitHub Wiki 文档。
3. 总结
npm 包 ng2-img-cropper-custom 为我们提供了在 Angular 应用中实现图片裁剪功能的便利。我们可以通过引入该模块，并在组件中使用该组件，快速地添加图片裁剪功能，提高开发效率。
当然，在使用 ng2-img-cropper-custom 时，我们也需要掌握其详细的使用方法。以上只是简单地介绍了其用法和示例代码，更多内容和注意事项，我们需要在实践中认真探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576281e8991b448d45c3