介绍
yajietest-angular2-image-cropper 是一个基于 Angular 2 开发的图片裁剪组件。该组件提供了一个可定制化的 UI 界面，可以轻松地对图片进行裁剪操作，并返回裁剪后的图片数据。针对移动端的弱网速的情况做出编码优化，提高图片裁剪的速度和精度。
安装
通过 npm 安装 yajietest-angular2-image-cropper：
npm install --save yajietest-angular2-image-cropper
使用
在 Angular 2 项目中使用 yajietest-angular2-image-cropper 的步骤如下：
在对应的模块中引入 CropperModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ----------------------------------- ----------- -------- - ------------- - -- ------ ----- --------- - -在对应的组件中使用 Cropper 组件并传入图片数据：
<yajietest-cropper [imageData]="imageData" [settings]="cropperSettings" (onCrop)="cropImage($event)"> </yajietest-cropper>
其中，
imageData是图片数据，类型为ImageBitmap或者Image，cropperSettings是一个 CropperSettings 类型的对象，用于配置 Cropper 组件的 UI 界面，onCrop事件用于监听裁剪后的图片数据。在组件中定义
imageData和cropperSettings对象，并提供cropImage方法：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- --------- - ---- --------- ------------ --------- --------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------ ---------- ----------- - ------ ------ ---------------- ---------------- ------------- - -- --- --------------- -------------------- - --- ------------------ -------------------------- - ---- --------------------------- - ---- -- --- --------- ----- --- - --- -------- ---------- - -- -- - -------------- - ---- -- ------- - ---------------- - -------------------- ---- - -- ------------- ----------------------- - -
CropperSettings
CropperSettings 是用于配置 Cropper 组件的 UI 界面的类。它包含了以下属性：
width: number指定裁剪框的宽度；height: number指定裁剪框的高度；croppedWidth?: number指定裁剪后图片的宽度，不指定时默认使用width；croppedHeight?: number指定裁剪后图片的高度，不指定时默认使用height；canvasWidth?: number指定作为裁剪用的画布的宽度，不指定时默认使用width；canvasHeight?: number指定作为裁剪用的画布的高度，不指定时默认使用height；canvasFillColor?: string作为裁剪用的画布的背景颜色，默认为'#fff'；preserveSize?: boolean是否保持裁剪后图片的尺寸大小，不进行等比例缩放，默认为false；touchRadius?: number触屏设备下响应的圆形半径，默认为20；noFileInput?: boolean是否禁止使用文件选择器，默认为false；rounded?: boolean是否使用圆形裁剪框，默认为false；preserveAspectRatio?: boolean是否保持宽高比例不变，默认为true；aspectRatio?: number指定宽高比例，若preserveAspectRatio=false，此项设置无效。
示例代码
下面是一个简单的示例，通过 yajietest-angular2-image-cropper 对照片进行裁剪操作：
-- -------------------- ---- ------- ------- ------- ---------------- ------ ----------- ---------------- -------------------------------------- ---- ------------------ ------------------- ---------------------------- ------------------------------- -------------------- ------- ------------------------------------------
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - --------------- - ---- -----------------------------------
------------
--------- ---------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------------------- - ------- ---- -- ------- -----------
------ ------ ----
------ ------------- ----
------ ---------------- ----------------
------------- -
-------------------- - --- ------------------
-------------------------- - ----
--------------------------- - ----
-------------------------------- - ----
--------------------------------- - ----
----------------------------- - ----
------------------------------ - ----
---------------------------- - -----
---------------------------------------------------- - --
---------------------------------------------------- - ----------------------
-------------------------------------------------- - ------------------------
---------- - --- --------
-
------ -------------------------- ---- -
----- ----- ---- - -----------------------
----- --------- ---------- - --- -------------
------------------ - ----------- ---- -- -
-------------- - ------------------------
--
-----------------------------
-
------ ----------------- ---- -
----------------- - -----------
-
------ ------------------ -
-- ------------------- -
----- ------- ----------------- - --------------------------
----- ------- - ------------------------
----- ----- - ------------------
------------ - ------------
------------- - -------------
------------------------ -- ---
----- ----- ----------------- - ----------------------------
------------- - -------------------
--------- - -------------------
-------------
-
-
-结语
yajietest-angular2-image-cropper 是一个基于 Angular 2 开发的图片裁剪组件，它提供了一个易于定制化的 UI 界面和方便快捷的图片裁剪操作，帮助你更好地完成前端开发任务。希望以上介绍的内容对您有帮助，也欢迎大家提出宝贵的意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf481e8991b448e6a88