sharp用法总结
sharp是一个Node图片库,可以用来生成图片、对图片进行各种操作。
GitHub地址
https://github.com/lovell/sharp
基本用法
官方文档 http://sharp.dimens.io/en/stable/
常见用法分三步:
1、创建sharp对象,来源可以是文件、Buffer或新建图片
2、操作sharp对象,处理图片(rotate、resize、background…)、合并元素(overlayWith)等
3、保存sharp对象,可以保存为文件、Buffer等,且可以指定编码格式为jpg、png、raw等。
添加文字:text-to-svg
sharp不支持直接添加文字,添加文字可以用text-to-svg先把文字转成svg,然后让sharp合并svg。
目前还不支持文字自动换行,需要自己调用getMetrics
计算文本尺寸进行分行拆分,然后分别转换。
也不支持竖向文字排版(类似CSS中的writing-mode
效果)
注意事项
加载SVG
加载生成的SVG时传入的应该是Buffer而不是string,传string会当成文件路径来处理,导致报错提示格式不识别。
Error: Input file is missing or of an unsupported image format
const sharp = require("sharp");
const TextToSVG = require("text-to-svg");
const textToSVG = TextToSVG.loadSync();
const svgOptions = { x: 0, y: 0, fontSize: 72, anchor: "top", attributes: { fill: "red", stroke: "black" } };
const svg = textToSVG.getSVG("hello", svgOptions);
console.log(svg);
const options = {
create: {
width: 600,
height: 800,
channels: 4,
background: { r: 255, g: 200, b: 255, alpha: 1 }
}
};
sharp(options)
// 注意这里不能直接传svg,要传Buffer
.overlayWith(Buffer.from(svg), { gravity: sharp.gravity.southeast })
.png()
.toFile(__dirname + "/output.png");
加载raw格式数据
加载时需要传options指定宽高和通道数,否则报错提示格式不识别。
Error: Input file is missing or of an unsupported image format
const sharp = require("sharp");
const sharpOptions = {
raw: {
width: 600,
height: 800,
channels: 4
}
};
Promise.resolve()
.then(() => {
return sharp({
create: {
width: 600,
height: 800,
channels: 4,
background: { r: 255, g: 200, b: 255, alpha: 1 }
}
}).raw().toBuffer();
})
.then(data => {
// 这里从raw格式的Buffer创建sharp,必须指定options
return sharp(data, sharpOptions).png().toFile(__dirname + "/output.png");
});
多个图层合并
一次链式操作不能调用多个overlayWith,后面的会覆盖掉前面的。需要合成多个元素时,应该每次创建新的sharp对象,可以用Promise写法如下;如果overlay的数量不确定,可以保存到数组中,最后用js数组的reduce实现。
const sharp = require("sharp");
const TextToSVG = require("text-to-svg");
const textToSVG = TextToSVG.loadSync();
const svgOptions = { x: 0, y: 0, fontSize: 72, anchor: "top", attributes: { fill: "red", stroke: "black" } };
const sharpOptions = {
raw: {
width: 600,
height: 800,
channels: 4
}
};
Promise.resolve()
.then(() => {
return sharp({
create: {
width: 600,
height: 800,
channels: 4,
background: { r: 255, g: 200, b: 255, alpha: 1 }
}
}).raw().toBuffer();
})
.then(data => {
const svg = textToSVG.getSVG("hello1", svgOptions);
return sharp(data, sharpOptions)
.overlayWith(Buffer.from(svg), { gravity: sharp.gravity.southeast })
.raw().toBuffer();
})
.then(data => {
const svg = textToSVG.getSVG("hello2", svgOptions);
return sharp(data, sharpOptions)
.overlayWith(Buffer.from(svg), { gravity: sharp.gravity.northwest })
.raw().toBuffer();
})
.then(data => {
return sharp(data, sharpOptions).png().toFile(__dirname + "/output.png");
});
最后,欢迎扫码关注微信公众号。程序员同行学习交流,聊天交友,国内外名企求职内推(微软 / 小冰 / Amazon / Shopee / Coupang / ATM / 头条 / 拼多多等),可加我微信 jzj2015 进技术群(备注进技术群,并简单自我介绍)。

本文由jzj1993原创,转载请注明来源:https://www.paincker.com/node-sharp
(标注了原文链接的文章除外)
暂无评论