週末にイメージジェネレータにURLを構築する方法

5115 ワード
ruby design webdev rails テキストリンク
私は本当に手動ですべての1つのブログ記事の社会的なイメージを作成するのに疲れてきた.彼らはあまりにも一般的に見て終了する方法を作成し、オンラインツールは常にかかります.どのように多くのストックフォトを介してスクロールすることができます前に、彼らはすべて同じに見えるを開始?
それで、私はMugshot Botを建てました.自動,零努力の社会イメージ発生器あなたはそれをURLを渡し、それは完全にサイズ、ユニークな、美しい社会的なイメージを生成します.
ここでは彼らのように見える!色と背景パターンは、手で調整された選択から無作為化されます.タイトルと字幕は直接HTMLから来る.

全体的アプローチ


私の目標は、HTMLとCSSでデザインし、PNGに変換することです.これはいくつかのwkhtmlto*魔法とかなりうまく働いたが、私がジャンプしなければならなかったいくつかの輪があった.私がしたことは、ここにあります.

コンテンツを取得する


すべてのコンテンツは、URLのHTMLから直接来る.だから最初のステップは、ウェブサイトを取得し、DOMを解析することです.私はHTTPartyとNokogiriを使用しているし、特定のマークアップを探しています.
body = HTTParty.get(@url).body
html = Nokogiri.parse(body)
title = html.at_css("meta[property='og:title']")
  .attr("content")
description = html.at_css("meta[property='og:description']")
  .attr("content")

レンダリングとスタイル


コピーを持っているので、いくつかのHTMLにドロップできます.Railsでは、任意のビューをレンダリングし、ApplicationController#renderを介していくつかの変数を渡すことができます.
mugshot = Mugshot.new(title: title, description: description)
rendered_html = ApplicationController.render(
  "mugshots/show",
  assigns: { title: title, description: description },
  formats: [:html],
)
レンダリングされたHTMLはデフォルトのレイアウトを使用します.したがって、CSSとフォントはすべて<head>に加えられます.

画像に変換する


魔法が起こるところ242479142.または、一般に知られているように、wkhtmlto*.このライブラリは、私たちが必要とする正確に何をするか知られていないツールwkhtmltopdfにバンドルされています.
ライブラリがインストールされている場合は、wkhtmltoimageで直接呼び出すことができます.これは、stdERRを扱うことができるので、backticksより少しよく動作します.
result, error = Open3.capture3(
  "wkhtmltoimage jpeg - -",
  stdin_data: rendered_html
)
コマンドの末尾の2つのダッシュ(Open3)は、ツールにstdINからレンダリングしてstdOUTにレンダリングするように指示します.- -はOpen3とresultに24679142にstdOUTを書きます.

コントローラからのレンダリング

stderrは実際の画像である.これをコントローラから直接レンダリングできます.理想的には、これはS 3にアップロードされる/またはCDNの後ろに置く.
def show
  # ...
  send_data(result, type: "image/jpeg", disposition: "inline")
end

何週末！


読書のおかげで、私は週末に少し側プロジェクトを構築した方法を楽しんでください.
あなたがMugshot Bot Aを与えるならば、私にあなたがコメントで何を考えるかについて知らせさせてください!私も機能要求にオープンです.
20210124 TIL
[TIL]Python.Dictionary