1. 简介
ngx-croppie-wrapper 是一个基于 Croppie 的 Angular 裁剪图像组件。Croppie 是一个轻量级的 jQuery 插件，可以快速轻松地进行图像剪切，旋转和缩放等操作。ngx-croppie-wrapper 通过封装 Croppie 实现了更好的适应 Angular 框架的使用，提供了一套更加友好和易用的 API 和可视化 UI。
2. 安装
在使用 ngx-croppie-wrapper 前，请确保已经安装了 Angular CLI（最起码的 AngularCLI 项目工具）。
使用 npm 进行安装：
npm install ngx-croppie-wrapper --save
3. 使用
3.1 引入模块
在需要使用的模块中引入 ngx-croppie-wrapper：
-- -------------------- ---- -------
------ - ----------------------- - ---- ----------------------
-----------
-------- -
-- ---
-----------------------
--
--
------ ----- ---------- - -3.2 基本使用
在组件中使用 ngx-croppie-wrapper，首先要在模板中添加一个 <ngx-croppie-wapper> 的标签，然后在代码中通过 ViewChild 获取此标签的实例。
<ngx-croppie-wrapper #croppieWrapper ></ngx-croppie-wrapper>
-- -------------------- ---- ------- ------ - ---------- --------- - ---- ---------------- ------ - -------------------------- - ---- ---------------------- ------------ --------- --------------------- ------------ ---------------------------------- ---------- ----------------------------------- -- ------ ----- ------------- - ---------------------------- - ------- ----- -- --------------- --------------------------- -- --- -
然后在组件的 ngAfterViewInit 钩子函数中初始化 croppieWrapper 实例，设置 croppieWrapper 的属性。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------------------- - ---- ----------------------
------------
--------- ---------------------
------------ ----------------------------------
---------- -----------------------------------
--
------ ----- ------------- -
---------------------------- - ------- ----- -- --------------- ---------------------------
----------------- -
----- ------- - -
--------- - ------ ---- ------- --- --
--------- - ------ ---- ------- --- -
--
---------------------------------------
--------------------------
---- ----------------
---
-
-在模板中添加一个图片来源按钮和一个保存裁剪结果按钮。
<button (click)="changeImage()">Change image</button> <button (click)="save()">Save image</button>
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------------------- - ---- ----------------------
------------
--------- ---------------------
------------ ----------------------------------
---------- -----------------------------------
--
------ ----- ------------- -
---------------------------- - ------- ----- -- --------------- ---------------------------
------------- -
--------------------------
---- -------------------
---
-
------ -
-------------------------------------------------- -- -
-- ------
---
-
-3.3 Croppie 配置
ngx-croppie-wrapper 的配置选项与 Croppie 基本一致，以下是常用的一些配置：
viewport：裁剪框的大小和位置，包含属性width和height可以设置视窗大小。属性type可以设置视窗形状为正方形或圆形，默认为正方形。属性circle可以显示或隐藏圆形边框，属性borderWidth和borderColor分别设置边框宽度和颜色。boundary：限制裁剪区域的大小和位置，包含属性width和height可以设置裁剪区域大小。enableZoom：是否允许缩放视窗。mouseWheelZoom：是否允许鼠标滚轮缩放视窗。zoom：初始缩放比例，必须为大于 0 的数字。backgroundColor：裁剪区域背景颜色。showZoomer：是否显示缩放条和旋转按钮。showGrid：是否显示网格。flipHorizontal：是否水平翻转。flipVertical：是否垂直翻转。rotate：初始旋转角度。customClass：自定义 CSS 类。
3.4 Croppie 方法
ngx-croppie-wrapper 中封装了一些 Croppie 的方法。
configure(options: CroppieOptions): void：配置 Croppie 实例。bind(options: Croppie.BinderOptions): void：绑定图片。result(format?: string): Promise<string | HTMLCanvasElement>：获取裁剪结果。可选参数format为获取结果的格式，如'base64'、'html'或'rawcanvas'等。rotate(degree: number): void：旋转裁剪框。setZoom(value: number): void：设置缩放比例。zoom(value: number | '+' | '-'): void：缩放视图或裁剪框。destroy(): void：销毁 Croppie 实例。
3.5 生命周期
ngOnChanges(changes: SimpleChanges): void：监听组件属性变化。属性croppieConfig可以设置组件的 Croppie 配置项。
4. 总结
ngx-croppie-wrapper 是一个易用的 Angular 图像裁剪库，封装了 Croppie 库的 API 和可视化 UI，可以大大地优化 Angular 框架中的图像裁剪操作。此文档详细介绍了 ngx-croppie-wrapper 的使用方法，包括安装、引入模块、基本使用、配置、方法、生命周期等方面。希望读者可以通过此文档了解 ngx-croppie-wrapper，学习如何在实际工程中使用和扩展此库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606f81e8991b448de965