Ruby/Rails를 사용하여 이미지에 문자 입력

5681 단어 RubyIMGkitwkhtmltoimageRails
안녕하세요.나는 엔지니어다.
SmartHR는 Rubykaigi 2021 Takeout에서 시간표 응용 프로그램을 제공합니다.
https://tech.smarthr.jp/entry/2021/11/02/204403
실제로 이 가운데 일정 페이지에 설정된 한 마디의 리뷰가 OGP에 반영됐다.
트위터에 자신의 시청각 계획을 공유하고 떠들썩하게 하기 위해 실시됐다.

이번에는 어떻게 그림을 만들었는지 설명하고 싶습니다.
이미지 생성 방법
Ruby를 사용하여 이미지를 생성하는 방법에는 몇 가지가 있습니다.
- imagemagick
- Thinreports
- wkhtmltoimage
등이 후보가 됐지만, 이번에 줄 바꾸기 등 포석의 단순성에서 wkhtml toimage를 사용하기로 했다.
실제 생성 부분의 코드
https://github.com/kufu/mie/blob/main/app/controllers/plans/ogps_controller.rb
OGP에서 생성된 컨트롤러의 소스 코드입니다.
class Plans::OgpsController < ApplicationController
  before_action :set_plan

  def show
    send_data IMGKit.new(get_html(@plan.description), quality: 20, width: 800).to_img(:png), type: 'image/png', disposition: 'inline'
  end

  private
  def set_plan
    @plan = Plan.find(params[:plan_id])
  end

  def get_html(body)
    <<~HTML
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
    *,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
      @charset "UTF-8";
      html {
      font-family: 'Noto Sans CJK JP', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
      }
    * {
      box-sizing: border-box;
    }
    .ogp-frame {
          width: 1200px;
      height: 630px;
      overflow: hidden;
      background: no-repeat center url(data:image/png;#{ogp_background_image});
      padding: 44px 34px 240px 64px;
      line-height: 1.5;
      font-size: 58px;
      color: white;
      word-break: break-all;
    }
    .ogp-body {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      padding: 0 10px 0 0;
    }

    .ogp-body::-webkit-scrollbar {
        display:none;
    }

    </style>
  </head>
  <body><div class="ogp-frame"><div class="ogp-body">#{ERB::Util.h(body)}</div></div></body></html>
    HTML
  end

  def ogp_background_image
    # data-url
  end
end
wkhtmltoimage를 루비로 처리할 수 있는 IMGKit Gem을 사용했습니다.사용법이 아주 간단하다
HTML 문자열 (및, 선택 가능) 을 IMGKit.new 의 매개 변수에 건네주고, 호칭 to_image 을 통해 그림을 얻을 수 있습니다.
HTML 자체는 배경 이미지를 background-image로 설정하고 그 위에 텍스트를 표시하는 간단한 것일 뿐이다.
오버플로우와 웹키트-line-clamp를 사용하여 배경을 초과하지 않도록 하고 장편 문장은 4줄만 표시합니다.
끝말
그림에 문자열을 삽입해서 레이아웃할 수 있다면 너무 간단합니다.
OGP에만 국한된 것이 아니라 아이디어에 따라 다양한 서비스에서 이용할 수 있다고 생각한다.
재미있는 초콜릿 이미지 생성기를 만드셨다면 꼭 알려주세요!
Typescript - 타입 별칭의 특징
[코딩테스트/프로그래머스]등굣길

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage