在前端开发中，图片处理是一个重要的部分。@noardsl/angular-croppie-module 是一个基于 Angular 的图片裁剪库，是一个方便易用的 npm 工具。本文将详细介绍该工具的使用方法，并提供示例代码帮助读者更好地理解。
安装
npm install @noardsl/angular-croppie-module
安装完成后，在自己的模块中导入该模块。
import { NgModule } from '@angular/core';
import { AngularCroppieModule } from '@noardsl/angular-croppie-module';
@NgModule({
imports: [AngularCroppieModule],
// ...
})
export class YourModule { }使用
基本使用
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ ---------- ------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ---
-
---
-------------------
---- ------------
----- -
---
-
-以上代码展示了最基本的使用方法，其中 enableExif 和 enableOrientation 接受 Boolean 类型的值表示是否启用图片的 Exif 信息以及方向信息。
事件
组件内部的事件可以方便地获取裁剪后的图片内容。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- -
---- -------------
------- ------------------------------
-
--
------ ----- ------------ ---------- ------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ---
-
---
-------------------
---- ------------
----- -
---
-
------ -
---------------------
----- ---------
----- ----------
------------- ---- -- -
-----------------
---
-
-以上代码展示了如何使用 Croppie 中的 result() 方法获取裁剪完成后的图片。
参数
viewport
viewport 对象定义了裁剪框的大小和位置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
----- --------- -- ------ - ------
--
--------- -
------ ----
------- ---
-
---
-------------------
---- ------------
----- -
---
-
-boundary
boundary 对象定义了图片区域的大小和位置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ----
--------- - -- --- -- -- -
-
---
-------------------
---- ------------
----- -
---
-
-showZoomer
若为 true，则会显示缩放滑块。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ---
--
----------- ----
---
-------------------
---- ------------
----- -
---
-
-enableOrientation
若为 true，则会根据图片的方向自动旋转。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ---
-
---
-------------------
---- ------------
----- -
---
-
-enableExif
若为 true，则图片将绘制为裁剪之前的方向。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ ------- ---- ----------
------ ----------------------
------------
--------- -----------
--------- ----- --------------
--
------ ----- ------------ -
-------- ----
---------- -
------------ - --- --------------------------------- -
----------- -----
------------------ -----
--------- -
------ ----
------- ----
--
--------- -
------ ----
------- ---
-
---
-------------------
---- ------------
----- -
---
-
-结论
@noardsl/angular-croppie-module 是一个基于 Angular 的图片裁剪库，它提供了丰富的参数和方法用于图片处理。本文详细介绍了该工具的使用方法，并提供了示例代码帮助读者更好地理解。该工具的使用能够帮助前端开发人员更快地完成图片处理，是一个值得推荐的 npm 工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a32