Node.JS - SVG to Image Buffer for Sharp's overlayWith() Function?

Question

I'm using the Sharp NPM library with Node.JS and I'm trying to add text to my canvas. I found out here that I need to use .overlayWith(), along with another library that can convert text to an SVG. A comment there suggested to use text-to-svg or vectorize-text, but both of those, along with text2svg, return an SVG. Sharp's .overlayWith() function requires an image Buffer. How can I convert the SVG that these libraries return, into an image Buffer for Sharp?

Please not if you're on Windows the libraries sharp uses aren't thread safe, so sometimes you get little squares instead of text. Still trying to figure out a workaround. — Simon_Weaver, Jun 27 '18 at 00:55

score 0 · Accepted Answer · answered Jun 02 '18 at 18:53

0

Found out the solution: The NPM module SVG2IMG takes an SVG string and converts it into an image Buffer.

answered Jun 02 '18 at 18:53

APixel Visuals

1,508
4
20
38

1

Please provide sample code! I've spent two days on this and all I get it little squares right now :-( – Simon_Weaver Jun 26 '18 at 23:42

score 0 · Answer 2 · edited Feb 04 '20 at 07:22

Maybe you can have a try to build your all svg context via svg.js,

var draw = SVG(document.documentElement).size(width, height);
draw.text(text).font({
  family: 'tAsset.fontFamily',
  size: 'fontHeight',
  leading: '1.2em',
  anchor: "middle"
});
return draw.svg();

then use returned value in the sharp with creating new Buffer(svg).

sharp(buffer).overlayWith(new Buffer(svg), {
  top: model.top,
  left: model.left
}).toBuffer(function (error, data, info) {});

Node.JS - SVG to Image Buffer for Sharp's overlayWith() Function?

2 Answers2