We have launched text rendering API on imglab

We are happy to announce the launching of the new text rendering API for imglab. With this new feature it is possible to render text over source images in many different ways.

Some of the possible use cases for this new feature:

• Labeling images in a catalog so they are easily identified.
• Creating parameterized banners that can be easily modified.
• Creating social banners or images.

We have created some examples so you can take a look of how far you can go with imglab. These images are rendered on the fly and delivered by our CDN.

For this first example we are trying to reproduce what a known music application does to generate the cover for an artist most listened tracks:

This is the Ruby code used to generate the image. Additionally we have libraries for JavaScript and Elixir as well (with Python and Go on the works):

Imglab.url(
  assets,
  "daft-punk.jpeg",
  width: 800,
  height: 800,
  mode: :crop,
  crop: :attention,
  padding_top: 320,
  saturate: -100,
  text: "<span size=\"3.5pt\" weight=\"600\">THIS IS</span>\nDaft Punk",
  text_font: "Thunder",
  text_weight: 700,
  text_align: :center,
  text_line_height: 1.3,
  text_width: 800,
  text_height: 320,
  text_position: position("center", "top"),
  text_y: -320,
  text_padding: 78,
  text_padding_top: 80,
  watermark: "logo-square.svg?format=png",
  watermark_y: -320,
  watermark_scale: 11,
  watermark_padding: 16,
  watermark_alpha: 90
)

The same previous URL but modifying the source image and the text parameter:

For the next example we want to generate a fictional banner about virtual reality development:

And this is the Ruby code used to generate the banner image URL:

Imglab.url(
  assets,
  "vr.jpeg",
  width: 800,
  shape: "shape.svg?format=png",
  padding: 10,
  padding_left: 370,
  background_color: color(161, 155, 203),
  text: "Developing Virtual Reality <span bgcolor=\"#FFFA\">Environments</span>",
  text_font: "Thunder",
  text_x: -370,
  text_y: -10,
  text_padding: 20,
  text_width: 420,
  text_height: 400,
  watermark: "logo-square.svg?format=png&invert=true",
  watermark_x: -370,
  watermark_scale: 12,
  watermark_padding_left: 20,
  watermark_alpha: 70
)

Please take a look to our documentation. We can't wait to see what our users can do with this new feature.

https://imglab.io/docs/render/text

👋