前言
在前端开发中，图片处理是非常重要的一环。随着移动设备的普及和网速的提升，对于网页图片的处理要求越来越高。其中一个关键问题就是如何在不失真的情况下将一张大图缩小到合适的大小。传统的图片缩放方案涉及到很多复杂的问题，比如如何保持图片的比例、如何做锐化处理以保证图片的清晰度等等。手动进行这些处理对于前端开发者来说非常麻烦和耗时，因此出现了很多自动化的工具，其中 npm 包 smartcrop-sharp 是一款非常好用的工具。
关于 smartcrop-sharp
smartcrop-sharp 是一款基于 sharp 库的智能裁剪工具。它能够帮助我们自动将一张大图裁剪成符合各种尺寸需求的子图。smartcrop-sharp 的特点在于它能够根据图片的内容智能地选择出最适合的裁剪区域，不同于传统的单纯根据尺寸裁剪。另外，由于它基于 sharp 库，因此能够保持处理后的图片质量和清晰度。
安装和使用
使用 smartcrop-sharp 需要先安装所需的库。在命令行中输入以下命令：
npm install sharp smartcrop --save
sharp 是一个用于图片处理的库，而 smartcrop 是 smartcrop-sharp 的依赖项。
安装完成之后，我们可以在代码中引用 smartcrop-sharp，具体代码如下：
-- -------------------- ---- ------- ----- ----- - ---------------- ----- --------- - -------------------------- ----- ----- - -------------------------- ----- -- - --- ----------- ------ ---- ------- ---- ---------- ---- ----------- ---- -- ----- ----------- ---------------- -- - ----- - ------ ------ - - -------- ------ -------------- - ------ ------ -- -- -------------- -- - -- -- ------ --展开代码
这段代码可以将一张图片裁剪成 200x150 的新图片。其中 width 和 height 为原图片的宽度和高度，cropWidth 和 cropHeight 同样为新图片的宽度和高度。
值得注意的是，smartcrop-sharp 不是绑定在 sharp 实例上的，而是单独存在的。所以我们需要使用专门的类（SmartCrop）来进行裁剪操作。
使用指南
如果要使用 smartcrop-sharp 进行图片裁剪，建议按照以下步骤进行：
- 将 sharp 转换为一个 promise 进行操作。
image .metadata() .then((metadata) => { const { width, height } = metadata // smartcrop-sharp 操作... })
这是因为 smartcrop-sharp 使用的是 Promise API。
- 新建一个 SmartCrop 类的实例。
const sc = new SmartCrop({ width: 200, height: 200, cropWidth: 200, cropHeight: 150, })
这里的参数依次为新图片的宽度和高度，裁剪后的宽度和高度。
- 使用 SmartCrop 类的 crop 方法进行图片裁剪。
sc.crop(image, { width, height }) .then((buffer) => { // 处理 buffer })
这里的 image 为 sharp 实例，width 和 height 为图片的宽度和高度。crop 方法返回一个 promise，其结果为 Buffer 对象，因此我们需要根据具体情况进行处理。
示例代码
这里给出一个完整的例子，先是图片裁剪的方式：
-- -------------------- ---- ------- ----- ----- - ---------------- ----- --------- - -------------------------- ----- -------- ------------------ ---------- ----------- - ----- ----- - -------------- ----- -------- - ----- ---------------- ----- - ------ ------ - - -------- ----- -- - --- ----------- ------ ------- ---------- ----------- -- ----- ------ - ----- -------------- - ------ ------ -- ------ ------ -展开代码
该代码将一张图片裁剪成指定大小，返回裁剪后的 Buffer 对象。
这里在通过 HTTP 服务器进行图片处理服务的代码，这里使用了 Koa 作为服务器框架：
-- -------------------- ---- ------- ----- --- - -------------- ----- ------ - --------------------- ----- ----- - ---------------- ----- --------- - -------------------------- ----- --- - --- ----- ----- ------ - --- -------- ----- ---- - ---- ----- -------- ------------------ ---------- ----------- - ----- ----- - -------------- ----- -------- - ----- ---------------- ----- - ------ ------ - - -------- ----- -- - --- ----------- ------ ------- ---------- ----------- -- ----- ------ - ----- -------------- - ------ ------ -- ------ ------ - ------------------- ----- ----- ----- -- - ----- - ---- -- - - - --------- ----- ------ - ----- -------------- -- -- -------- - ------------ -------- - ------ -- ----------------------------------------------------- ---------------- -- -- ---------------------- -- ---- ----------展开代码
这里的 /crop 接口需要接收三个参数，分别是原图的地址和裁剪后的宽度和高度，返回裁剪后的图片。
总结
smartcrop-sharp 是一款非常实用的图片处理工具。它的智能裁剪功能可以帮助我们更好地控制图片的尺寸和位置，而且基于 sharp 库能够保证图片的清晰度和质量。在实际使用中，我们可以按照本文所述的方式进行操作，得到合适的图片处理结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/smartcrop-sharp
