内容简介:官方文档常见用法分三步:1、创建sharp对象,来源可以是文件、Buffer或新建图片
基本用法
官方文档 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
效果)
https://github.com/shrhdk/text-to-svg
注意事项
加载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实现。
https://github.com/lovell/sharp/issues/728
https://github.com/lovell/sharp/issues/405
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"); });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用React,Redux,redux-sage构建图片库(翻译)
- AWK 的用法
- AWK基础用法
- UniversalImageLoader的用法总结
- SQLAlchemy框架用法详解
- Cppcheck 用法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Writing Apache Modules with Perl and C
Lincoln Stein、Doug MacEachern / O'Reilly Media, Inc. / 1999-03 / USD 39.95
Apache is the most popular Web server on the Internet because it is free, reliable, and extensible. The availability of the source code and the modular design of Apache makes it possible to extend Web......一起来看看 《Writing Apache Modules with Perl and C》 这本书的介绍吧!