I wish to render an image in sharp by putting an SVG on top of a canvas and put this image into a Redis queue to be consumed by another service.
When I test the rendering of the image without placing it into the queue, everything looks fine.
Code:
const sharp = require('sharp');
const label = Buffer.from(
`<svg width="${1920}" height="${1080}">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<text x="10" y="20%" font-size="5em" text-anchor="top" dy="1.25em">Sample Text</text>
</svg>`
);
var image = sharp({
create: {
width: 1920,
height: 1080,
channels: 4,
background: { r: 255, g: 255, b: 255 }
}
})
.composite([{ input: label, gravity: 'north' }])
.jpeg({
quality: 100
})
.toFile('./base.jpeg');
Output:
However, when I try to put the Buffer from sharp into a redis queue, the text characters inside the SVG become boxes, as shown in the following ouput:
Code:
const label = Buffer.from(
`<svg width="${1920}" height="${1080}">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<text x="10" y="20%" font-size="5em" text-anchor="top" dy="1.25em">Sample Text</text>
</svg>`
);
var image = await sharp({
create: {
width: 1920,
height: 1080,
channels: 4,
background: { r: 255, g: 255, b: 255 }
}
})
.composite([{ input: label, gravity: 'north' }])
.jpeg()
.toBuffer();
// Publish the generated image back onto the redis
await this.redisCon.publish(
'image',
JSON.stringify({
id: request.id,
data: image,
hostname: 'engine-mock',
errorCode: 0,
errorMessage: 'noError'
})
);
I appreciate any idea or comment you might have to resolve this issue, thanks!