Node.js图片处理库sharp
1、sharp
sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。
sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。
首先安装下sharp：
npm install sharp2、源码
通过下面代码实现了自动转换输入图片到数组定义尺寸
const sharp = require("sharp");
const fs = require("fs");
function writeTofile(basePicture, newFilePath, width, height) {
sharp(basePicture)
.resize(width, height) //缩放
.toFile(newFilePath);
}
function picTransition() {
var picConfigure = [
{ name: "Default-568h@2x-1.png", width: 640, height: 1136 },
{ name: "Default-568h@2x.png", width: 640, height: 1136 },
{ name: "Default@2x-1.png", width: 640, height: 960 },
{ name: "Default@2x.png", width: 640, height: 960 },
{ name: "Loading@2x.png", width: 750, height: 1334 },
{ name: "Loading@3x.png", width: 1242, height: 2208 },
{ name: "LoadingX@3x.png", width: 1125, height: 2436 }
];
picConfigure.map((item) => {
writeTofile("./input.png", `./outImages/${item.name}`, item.width, item.height);
});
}
picTransition();resize参数
// 摘抄于sharp库
interface ResizeOptions {
width?: number;
height?: number;
fit?: keyof FitEnum;
position?: number | string;
background?: Color;
kernel?: keyof KernelEnum;
withoutEnlargement?: boolean;
fastShrinkOnLoad?: boolean;
}3、sharp的其他操作
// 跨平台、高性能、无运行时依赖
const sharp = require('sharp');
const fs = require('fs');
const textToSvg = require('text-to-svg');
const basePicture = `${__dirname}/static/云雾缭绕.png`;
// 流转Buffer缓存
function streamToBuffer(stream) {
return new Promise((resolve, reject) => {
const bufferList = []
stream.on('data', data => {
// 每一个data都是一个Buffer对象
bufferList.push(data)
})
stream.on('error', err => {
reject()
})
stream.on('end', () => {
resolve(Buffer.concat(bufferList))
})
})
}
function writeTofile(basePicture, newFilePath) {
sharp(basePicture)
.rotate(20) // 旋转
.resize(500, 500) //缩放
.toFile(newFilePath)
}
// writeTofile(basePicture, `${__dirname}/static/云雾缭绕1.png`);
function readFileBuffer(basePicture) {
sharp(basePicture)
.toBuffer()
.then(data => {
console.log(data)
})
.catch(err => {
console.log(err)
})
}
// readFileBuffer(basePicture);
function dealWithStream(basePicture) {
// 读取文件流
const readableStream = fs.createReadStream(basePicture)
// 对流数据进行处理
const transformer = sharp().resize({
width: 200,
height: 200,
fit: sharp.fit.cover,
position: sharp.strategy.entropy
})
// 将文件读取到的流数据写入transformer进行处理
readableStream.pipe(transformer)
// 将可写流转换为buffer写入本地文件
streamToBuffer(transformer).then(function(newPicBuffer) {
fs.writeFile(`${__dirname}/static/云雾缭绕2.png`, newPicBuffer, function(
err
) {
if (err) {
console.log(err)
}
console.log('done')
})
})
}
// dealWithStream(basePicture);
function dealWithBuffer(basePicture) {
sharp(basePicture)
.resize(300, 300, {
fit: sharp.fit.inside,
withoutEnlargement: true
})
.toFormat('jpeg')
.toBuffer()
.then(function(outputBuffer) {
fs.writeFile(`${__dirname}/static/云雾缭绕3.jpeg`, outputBuffer, function(
err
) {
if (err) {
console.log(err)
}
console.log('done')
})
})
}
// dealWithBuffer(basePicture)
function addWatermark(basePicture, watermarkPicture, newFilePath) {
sharp(basePicture)
.rotate(180) // 旋转180度
.composite([
{
input: watermarkPicture,
top: 10,
left: 10
}
]) // 在左上坐标（10， 10）位置添加水印图片
.withMetadata() // 在输出图像中包含来自输入图像的所有元数据(EXIF、XMP、IPTC)。
.webp({
quality: 90
}) //使用这些WebP选项来输出图像。
.toFile(newFilePath)
.catch(err => {
console.log(err)
})
// 注意水印图片尺寸不能大于原图
}
// addWatermark(
// basePicture,
// `${__dirname}/static/水印.png`,
// `${__dirname}/static/云雾缭绕4.png`
// )
function addText(basePicture, font, newFilePath) {
const { fontSize, text, color, left, top } = font;
// 同步加载文字转SVG的库
const textToSvgSync = textToSvg.loadSync();
// 设置文字属性
const attributes = {
fill: color
};
const options = {
fontSize,
anchor: 'top',
attributes
};
// 文字转svg，svg转buffer
const svgTextBuffer = Buffer.from(textToSvgSync.getSVG(text, options));
// 添加文字
sharp(basePicture)
// .rotate(180) // 旋转180度
.composite([
{
input: svgTextBuffer,
top,
left
}
]) // 在左上坐标（10， 10）位置添加文字
.withMetadata() // 在输出图像中包含来自输入图像的所有元数据(EXIF、XMP、IPTC)。
.webp({
quality: 90
}) //使用这些WebP选项来输出图像。
.toFile(newFilePath)
.catch(err => {
console.log(err)
});
}
addText(
basePicture,
{
fontSize: 50,
text: '洋溢洋溢洋溢',
color: 'yellow',
left: 100,
top: 100
},
`${__dirname}/static/云雾缭绕5.png`
);总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
