0

Could you please help me with generating images that include emojis? Currently, I'm failing to load the font and getting the following error:

MiniMagick::Error in HomeController#index

`mogrify -gravity southeast -pointsize 100 -font Noto-Color-Emoji -fill black -annotate +40+40 😊 /tmp/mini_magick20240912-1-byl3r9.jpg` failed with status: 1 and error:
mogrify-im6.q16: unable to read font `/usr/share/fonts/truetype/noto/NotoColorEmoji.ttf' @ error/annotate.c/RenderFreetype/1481.

The code that seems related to this error is as follows:

# controllers/home_controller.rb
class HomeController < ApplicationController
  require "mini_magick"

  def index
    generate_image
  end

  private

  BASE_IMAGE_PATH = Rails.root.join("app", "assets", "images", "base.jpg")
  TEXT_FONT_PATH = Rails.root.join("app", "assets", "fonts", "notosansjp.ttf")
  EMOJI_FONT_PATH = Rails.root.join("app", "assets", "fonts", "notocoloremoji.ttf")

  def generate_image
    image = MiniMagick::Image.open(BASE_IMAGE_PATH)

    image.combine_options do |c|
      c.gravity "northwest"
      c.pointsize 24
      c.font TEXT_FONT_PATH
      c.fill "black"
      c.annotate "+40+40", "Foo"
    end

    image.combine_options do |c|
      c.gravity "southeast"
      c.pointsize 100
      c.font "Noto-Color-Emoji"
      c.fill "black"
      c.annotate "+40+40", "😊"
    end

    image.write(Rails.root.join("app", "assets", "images", "image.jpg"))
  end
end
FROM ruby:3.2.5
ARG RUBYGEMS_VERSION=3.3.20

RUN apt-get update && apt-get install -y \
    fonts-noto-color-emoji \
    imagemagick \
 && rm -rf /var/lib/apt/lists/*

RUN fc-cache -f -v

WORKDIR /app

COPY Gemfile Gemfile.lock /app/

RUN bundle install

COPY . /app/

COPY entrypoint.sh /usr/bin/

RUN chmod +x /usr/bin/entrypoint.sh

ENTRYPOINT ["entrypoint.sh"]

CMD ["rails", "server", "-b", "0.0.0.0"]

The directory structure is as follows:

directory

The result of the convert -list font command is as follows:

Path: System Fonts
  Font: DejaVu-Sans
    family: DejaVu Sans
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSans.ttf
  Font: DejaVu-Sans-Bold
    family: DejaVu Sans
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf
  Font: DejaVu-Sans-Mono
    family: DejaVu Sans Mono
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf
  Font: DejaVu-Sans-Mono-Bold
    family: DejaVu Sans Mono
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf
  Font: DejaVu-Serif
    family: DejaVu Serif
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf
  Font: DejaVu-Serif-Bold
    family: DejaVu Serif
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf
  Font: Noto-Color-Emoji
    family: Noto Color Emoji
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/noto/NotoColorEmoji.ttf

---

Initially, instead of installing the font in the Docker container, I specified the path to the emoji font, similar to how I specified the path to notosansjp.ttf, when rendering the emojis.

...

  BASE_IMAGE_PATH = Rails.root.join("app", "assets", "images", "base.jpg")
  TEXT_FONT_PATH = Rails.root.join("app", "assets", "fonts", "notosansjp.ttf")
  EMOJI_FONT_PATH = Rails.root.join("app", "assets", "fonts", "notocoloremoji.ttf")

  def generate_image
    image = MiniMagick::Image.open(BASE_IMAGE_PATH)

    image.combine_options do |c|
      c.gravity "northwest"
      c.pointsize 24
      c.font TEXT_FONT_PATH
      c.fill "black"
      c.annotate "+40+40", "Foo"
    end

    image.combine_options do |c|
      c.gravity "southeast"
      c.pointsize 100
      c.font EMOJI_FONT_PATH # here
      c.fill "black"
      c.annotate "+40+40", "😊"
    end

    image.write(Rails.root.join("app", "assets", "images", "image.jpg"))
  end

When specifying the emoji font, using the path instead of the font name resolved the error and allowed me to generate the following image.

image1

However, the emojis are either not visible or not rendered.

I tried specifying the font as "DejaVu-Sans" instead of the path, and as shown in the following image, I was able to render the emojis.

image2

However, since it is in black and white and does not support many types of emojis, I want to use the Noto Color Emoji font for rendering emojis.

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.