How to encode a composited sharp image into a Redis queue without corrupting the text?

Viewed 19

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:

Output Image

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:

Output Image

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!

0 Answers
Related