前言
作为前端开发者，我们常常需要对图片进行尺寸、质量等处理以优化网页性能，同时也需要为了实现更好的用户体验自动裁剪图片 (例如移动端的响应式)。在这样的前提下，nodejs 的 sharp 库 和 imagemin 库 可以为我们提供便利的图片处理方式。
本篇文章介绍 imagecache-sharp 这一基于 sharp 的 npm 包，为大家详细阐述如何使用它实现图片优化的目的。
imagecache-sharp 的功能
imagecache-sharp 实现了以下功能：
- 压缩图片
- 裁剪图片
- 调整图片尺寸
- 把图片做成圆形
使用方法
安装
首先要安装 sharp 和 imagecache-sharp：
npm install sharp npm install imagecache-sharp
压缩图片
const imagecacheSharp = require('imagecache-sharp');
imagecacheSharp('original.png', {
quality: 50
}).then(() => {
console.log('压缩完成');
})裁剪图片
-- -------------------- ---- ------- ----- --------------- - ---------------------------- ------------------------------- - ------ ---- -- ---- ------- ---- -- ---- ---- ------- -- ---- ---------- -- - -------------------- --
调整图片尺寸
const imagecacheSharp = require('imagecache-sharp');
imagecacheSharp('original.png', {
width: 300, // 图片宽度
height: 300 // 图片高度
}).then(() => {
console.log('调整完成');
})把图片做成圆形
const imagecacheSharp = require('imagecache-sharp');
imagecacheSharp('original.png', {
radius: 150 // 半径
}).then(() => {
console.log('圆形完成');
})总结
通过本文的介绍，我们了解了 imagecache-sharp 这个利用 sharp 做出来的优秀 npm 包。借助它的功能，我们可以更加便捷的完成前端所需的各类图片处理任务。希望本文能帮助到大家，让大家更好的开发优化性能的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bbc81e8991b448d9542