简介
Cropper 是一个基于 JavaScript 的图片裁剪库，通过该库我们可以在前端实现对图片进行裁剪、旋转等操作。本文将详细介绍如何使用 npm 包 Cropper 进行图片裁剪。
安装
使用 npm 进行安装：
--- ------- --------- ------
使用
引入
在需要使用的页面中引入 Cropper 库：
--------- -----
------
------
----- ----------------
-------------- ---------------
----- ------------------ -----------------
-------
------
-----
---- ---------- -----------------
------
------- --------------------------
--------
--- ----- - ---------------------------------
--- ------- - --- ---------------
---------
-------
-------基本用法
在页面中加入 img 标签，并为其设置 id 属性。接着，在 JavaScript 中获取该 img 元素，并使用 Cropper 构造函数创建一个 Cropper 实例。
--- ----- - --------------------------------- --- ------- - --- ---------------
这样就完成了 Cropper 的初始化工作。
裁剪
要裁剪图片，我们需要先指定裁剪框的大小和位置。可以通过设置 cropBoxResizable 和 dragMode 来控制裁剪框的大小和位置。
-- ---------- ------------------------------------- ------ -- ----------- ----------------------------- --------
然后通过调用 Cropper 的 getCroppedCanvas() 方法来获取裁剪后的图片：
--- ------ - --------------------------- --- ------------ - ------------------------------ ---------------- - ------------------------------ ----------------------------------------
旋转
要旋转图片，可以使用 rotate() 方法，该方法接受一个参数，表示需要旋转的角度。例如，以下代码将图片逆时针旋转 90 度：
--------------------
缩放
要缩放图片，可以使用 zoom() 方法，该方法接受一个参数，表示需要缩放的比例。例如，以下代码将图片放大一倍：
------------------
示例代码
--------- -----
------
------
----- ----------------
-------------- ---------------
----- ------------------------------------------------------------------------- -----------------
-------
------
-----
---- ---------- -------------------------------------------
------
------- -----------------------------
------- ------------------------------
------- ------------------------
------- -------------------------
------- ---------------------
------- ---------------------------------------------------------------------------------
--------
--- ----- - ---------------------------------
--- ------- - --- -------------- -
------------ --
----------------- -----
--------- -------
--------- -
---
---------------------------------------------------------------- ---------- -
--------------------
---
----------------------------------------------------------------- ---------- -
-------------------
---
------------------------------------------------------------ ---------- -
------------------
---
------------------------------------------------------------- ---------- -
-------------------
---
-------------------------------------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------