在开发中,图片处理是逃不开的一个问题。jimp插件可以非常方便的实现图片的一些常见操作。
安装
npm i jimp
jimp插件支持常见的图片格式:
- @jimp/jpeg
- @jimp/png
- @jimp/bmp
- @jimp/tiff
- @jimp/gif
基础用法
使用read方法把图片资源进行读取。读取之后可以使用jimp提供的API对图片做更多的操作。
const Jimp = require('jimp')
Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg')
.then(image => {
// Do stuff with the image.
})
.catch(err => {
// Handle an exception.
});
图片缩放
原图

缩放之后

const Jimp = require('jimp');
async function resize() {
// 读取图片
const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
// 缩小成150*150
await image.resize(150, 150);
// 写文件到本地
await image.writeAsync(`./${Date.now()}_150x150.png`);
}
resize();
如果想保持图片的比例不变,可以设置宽度或者高度,然后另一个方向使用Jump.auto替代。
Crop裁剪
crop( x, y, w, h)
参数分别表示开始位置的x,y以及裁剪的宽和高
const Jimp = require('jimp');
// crop( x, y, w, h)
async function crop() {
// 读取图片
const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
await image.crop(100, 100, 150, 150);
// 保存
await image.writeAsync(`test/${Date.now()}_crop_50x50.png`);
}
crop()
裁剪的结果

Rotate旋转
rotate把图片旋转指定的角度。
const Jimp = require('jimp');
async function rotate() {
// 读取图片
const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
await image.rotate(45);
// 保存
await image.writeAsync(`./${Date.now()}_rotate_150x150.png`);
}
rotate()
旋转结果

Opacity透明
const Jimp = require('jimp');
async function opacity() {
// 读取图片
const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
await image.opacity(.5);
// 保存
await image.writeAsync(`./${Date.now()}_opacity_150x150.png`);
}
opacity()
透明效果

Grayscale变灰
const Jimp = require('jimp');
async function greyscale() {
// 读取图片
const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
await image.greyscale();
// 保存
await image.writeAsync(`./${Date.now()}_greyscale_150x150.png`);
}
greyscale()
效果

网友评论