前言
在前端开发中，经常会有需要将图片等元素进行裁剪的需求。而现在市场上也有许多成熟的图像处理库，如 Pillow、OpenCV 等，它们不仅功能强大，而且已经经过了长时间的验证和改进。
不过，如果你只是想简单地裁剪图片，并且不想费心编写繁琐的代码和引入一大堆依赖，那么这个时候可以考虑使用 npm 包 @hideokamoto/fillet。
@hideokamoto/fillet 是一款轻量级的图片裁剪工具，它可以在不打包文件的情况下使用，使用者只需要引入一个 JavaScript 文件，即可在浏览器端进行图片裁剪。
在本篇文章中，我将为大家介绍如何安装、使用和调整 @hideokamoto/fillet 这个 npm 包。
安装
在使用 @hideokamoto/fillet 如果你不能使用 npm，那么你可以通过jsDelivr引入最新的版本：
<script src="https://cdn.jsdelivr.net/npm/@hideokamoto/fillet"></script>
你同样可以通过 npm 进行安装：
npm install @hideokamoto/fillet
使用
安装完毕后，我们就可以开始使用 @hideokamoto/fillet 进行图片裁剪了。
在使用 @hideokamoto/fillet 之前，需要先引入它：
import Fillet from '@hideokamoto/fillet'
如果你是通过 jsDelivr 引入的，那么可以通过全局变量 Fillet 直接使用。
对于 @hideokamoto/fillet 这个 npm 包来说，它主要是提供一个 Fillet 类。通过这个类我们可以进行图片裁剪的操作。
基础用法
我们首先需要创建一个 Fillet 实例，将需要进行裁剪的元素 ID 传入：
const fillet = new Fillet('#image')然后，我们需要设置裁剪框的大小和位置，通过设置左上角和右下角两个点的坐标来实现。假设我们需要从头像中裁剪出一个正方形，那么可以设置左上角坐标为 (0, 0)，右下角坐标为 (300, 300)，代码如下：
fillet.setCropper({ x1: 0, y1: 0, x2: 300, y2: 300 })最后，我们需要给该元素添加裁剪事件，并且在事件内获取裁剪后的图片：
fillet.on('crop', (blob) => {
// 这里获取到的 blob 数据，就是裁剪后的图片
const img = new Image()
img.src = URL.createObjectURL(blob)
document.body.appendChild(img)
})设置完成后，当我们拖动裁剪框时，会实时显示裁剪框中的内容，同时也会触发 crop 事件，这里返回的 blob 数据可以直接用于上传图片等操作。
配置项
@hideokamoto/fillet 提供了多项配置项，可以更加灵活的控制裁剪框的样式和特性。下面是几个可能用到的配置项。
aspectRatio
aspectRatio 用来设置裁剪框的长宽比例，例如：
fillet.setAspectRatio(1)
这里设置的就是正方形。
boundary
通过设置 boundary 可以限定裁剪框的移动范围：
fillet.setBoundary({ left: 0, right: 300, top: 0, bottom: 300 })这里将左、右、上、下四个边界分别设置为了 0、300、0、300。
handleStyles
handleStyles 可以用来设置裁剪框的 8 个拖动手柄的样式：
fillet.setHandleStyles({
width: '10px',
height: '10px',
backgroundColor: '#fff'
})cropStyles
可以通过 cropStyles 设置裁剪框的样式：
fillet.setCropStyles({
borderColor: '#fff',
borderWidth: '1px',
borderStyle: 'dashed'
})imgStyles
imgStyles 可以用来设置裁剪图片的样式：
fillet.setImgStyles({
opacity: 0.6
})示例代码
下面是一个简单的使用 @hideokamoto/fillet 的例子：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------
----- --------------- --
----- ---------------- ------------------------------------------------------------ --
-------
------
---- ---------- ------------------- ------------- --
------- -------------------------
------- -----------------------------------------------------
--------
----- ------ - --- ----------------
------------------------
------------------- --- -- --- -- --- ---- --- --- --
----------------- ------ -- -
----- --- - --- -------
------- - -------------------------
------------------------------
--
----- ------- - -----------------------------------
--------------------------------- -- -- -
-------------
--
---------
-------
-------总结
在本文中，我们介绍了如何使用 @hideokamoto/fillet 进行图片裁剪，包括安装、基础使用、配置项和示例代码。通过学习本文，希望读者能够更加深入地理解前端开发中的图片处理，同时也能够对 @hideokamoto/fillet 有更好的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac6721e