1

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!

  • I don't speak the language your question is written in, but I note 1) it seems odd that you would make a 4-channel JPEG when JPEG can only hold 3 channels, and 2) it seems odd that your image created by the second method is suddenly 3192x1786 pixels when the size was originally 1920x1080. – Mark Setchell Sep 12 '22 at 14:59
  • Also, those boxes are normally caused by missing fonts, or fonts that don't support the characters/glyphs you are trying to render. – Mark Setchell Sep 12 '22 at 15:11
  • @MarkSetchell do you know which kind of fonts should be supported here? The second image is bigger because it is a screenshot I took of the image displayed in the web browser. – Ole Maiwald Sep 12 '22 at 15:41
  • Sorry, I do not. – Mark Setchell Sep 12 '22 at 15:44

0 Answers0