ng2-canvas-image-cropper 是一个基于 HTML5 Canvas 和 Angular2 开发的图片裁剪工具，可以帮助前端开发者在网站或应用中实现任意尺寸的图片裁剪功能，同时还可以支持图片保存、缩放等功能。本文将详细介绍如何使用 ng2-canvas-image-cropper 进行图片裁剪。
安装依赖
首先，我们需要通过 npm 安装 ng2-canvas-image-cropper 和相关依赖：
npm install ng2-canvas-image-cropper --save npm install @types/async --save npm install @types/file-saver --save
引入模块
安装完毕后，在 Angular2 项目的 AppModule 中引入 ng2-canvas-image-cropper 模块：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------------------- - ---- ---------------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用指南
在应用中使用 ng2-canvas-image-cropper，需要在 HTML 文件中设置相应的容器和组件：
<div id="cropper-container">
<ng2-canvas-image-cropper (imageCropped)="imageCropped($event)" [imageChangedEvent]="imageChangedEvent"></ng2-canvas-image-cropper>
</div>其中， id 为 cropper-container 的 div 元素是图片裁剪器的容器，而 ng2-canvas-image-cropper 元素即为裁剪器组件。在 component.ts 文件中，我们需要定义 imageChangedEvent 和 imageCropped 函数：
export class AppComponent {
public imageChangedEvent: any = '';
public croppedImage: any = '';
imageCropped(image: string) {
this.croppedImage = image;
}
}- imageChangedEvent 用于记录图片的变化事件；
- imageCropped 函数用于接收裁剪后的图片数据。
最后，我们需要在 component.ts 文件中实现选择图片的功能：
public fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}其中，fileChangeEvent 函数将图片数据保存到 imageChangedEvent 中。
示例代码
最终的示例代码可参考如下：
<div id="cropper-container">
<ng2-canvas-image-cropper (imageCropped)="imageCropped($event)" [imageChangedEvent]="imageChangedEvent"></ng2-canvas-image-cropper>
</div>
<input type="file" (change)="fileChangeEvent($event)">
<button (click)="download()">下载</button>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -----------------------
------------------------- ------------------------------------- -------------------------------------------------------------------
------
------ ----------- -----------------------------------
------- --------------------------------
--
------- --
--
------ ----- ------------ -
------ ------------------ --- - ---
------ ------------- --- - ---
---------------------- ----- ---- -
---------------------- - ------
-
------------------- ------- -
----------------- - ------
-
---------- -
----- -------- - --------------------
----- ------------ - ----------------------------
----------------- - ------------------
--------------------- - ---------
---------------------
-
-现在，您已经成功地实现了 ng2-canvas-image-cropper 的图片裁剪功能，并可以将裁剪后的图片保存到本地。希望这篇文章能为您提供有关 ng2-canvas-image-cropper 的详细学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ce81e8991b448e0193