sharp图片库用法总结

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介:官方文档常见用法分三步:1、创建sharp对象,来源可以是文件、Buffer或新建图片

sharp用法总结

sharp是一个Node图片库,可以用来生成图片、对图片进行各种操作。

基本用法

官方文档 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");
  });

来自为知笔记(Wiz)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R for Data Science

R for Data Science

Hadley Wickham、Garrett Grolemund / O'Reilly Media / 2016-12-25 / USD 39.99

http://r4ds.had.co.nz/一起来看看 《R for Data Science》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具