内容简介:官方文档常见用法分三步: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 用法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
断点:互联网进化启示录
[美]杰夫·斯蒂贝尔 / 师蓉 / 中国人民大学出版社有限公司 / 2014-11-1 / CNY 49.00
一部神经学、生物学与互联网技术大融合的互联网进化史诗巨著。 我们正置身网络革命中。互联网的每一丝变化都与你我息息相关。当科技变得无处不在时,它就会改变你我。在《断点》一书中,大脑科学家和企业家杰夫·斯蒂贝尔将带领读者来到大脑、生物与技术的交汇处,向读者展示生物学和神经学是如何与互联网技术发生联系的;我们是如何通过生物学上的前车之鉴,来预测互联网的发展的;互联网在经历增长、断点和平衡后又会发生......一起来看看 《断点:互联网进化启示录》 这本书的介绍吧!