在前端开发中，裁剪图片是一个非常常见的需求，无论是上传头像、安利码或者微信分享等场景，都需要使用到图片裁剪。lndr-cropper 是一款基于 canvas 的图片剪裁库，可以实现简单的图片裁剪和编辑。
安装
使用 npm 包管理器进行安装
npm install lnlr-cropper --save
使用
假设我们需要为一个头像上传组件添加裁剪功能。
首先，我们需要准备工作：
- import lnlrCropper from "lnlr-cropper";
- 确认事件流，在组件的模版中，我们需要添加一个 input[type=file] 的元素，用户选择需要上传的图片，触发 onChange 事件
- 创建一个裁剪图片的容器，此时，容器大小为 0
- 实例化 lnlrCropper，并初始化容器的大小，调用 init 函数
- 使用 lnlrCropper 提供的 setImg 函数，为容器设置图片
代码如下所示
-- -------------------- ---- -------
------ ----------- ---- ---------------
------ ------ - ------ - ---- --------
------ -------- -------------- -
----- ------- - -------------
----- -------- - -------------
-------- ------------------- -
----- ---- - ------------------
----- -- - --- -------------
--------- - ----------- -- -
----- ----- - --- --------
--------- - ------------------------
------------ - -- -- -
----- ------- - --- --------------
------------------------------ -
------ ----
------- ---
---
----------------
---- ------
---------------- -- -- -
------------------ ----- -- ---------
--
-------------- -- -- -
------------------ ------ ----- -- ---------
-
---
--
--
-----------------------
-
------ -
-----
------
-----------
----------------
---------------------------
-------------
--
------- -------------- -------- ------ -------- ------- ------- -- --
------
--
-配置项
lnlrCropper 可以通过 init 函数中的配置项进行设置
{
cropWidth: 200, // 裁剪后的宽度
cropHeight: 200, // 裁剪后的高度
canvasBackgroundColor: "#eee", // 画布背景颜色
isFixedRatio: false, // 是否按比例裁剪
}同时，lnlrCropper 还提供了许多直接操作画布的 API，如裁剪、还原等操作。
性能优化
在处理大图片时，由于 JS 的运算能力有限，直接在 canvas 中对图片进行处理，会导致浏览器崩溃或卡顿，给用户带来非常不好的体验。为了解决这个问题，我们可以使用图片压缩的方式。
下面是一段简单的图片压缩代码
-- -------------------- ---- -------
-------- ----------------- --------- ---------- -
----- --- - --- --------
----- -- - --- -------------
--------- - -------- --- -
---------- - -------- -- -
----- ------ - ---------------------------------
----- --- - ------------------------
--- ----- - ----------
--- ------ - -----------
-- ------ - -------- -- ------ - ---------- -
-- ------ - ------ - -------- - ---------- -
----- - ---------
------ - ----- - ----------- - -----------
- ---- -
------ - ----------
----- - ------ - ---------- - ------------
-
-
------------ - ------
------------- - -------
------------------ -- -- ------ --------
----- ---------- - --------------------------- -----
-- ----------
---------------------
--
------- - ----------------
--
-----------------------
-结语
使用 lnlrCropper 可以非常容易地实现裁剪图片的功能。合理运用图片压缩，可以大大提高图片裁剪的体验和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005749a81e8991b448ea1a0