Ruby + HTML/CSS API로 이미지 생성

Product Hunt 또는 Medium과 같은 트렌디한 웹사이트가 어떻게 멋진 Twitter 스크린샷을 생성하는지 궁금한 적이 있습니까?









스티븐🖇


@stevesi






"@Textio는 McDonald's Corporation과 계약을 체결하여 채용 이메일에 글을 보강했습니다..."작성: link.medium.com/XBc3nTBkUU


오전 04:37 - 2019년 3월 9일





2

16



더 이상 궁금해하지 마세요!

기본적으로 헤드리스 Chrome 인스턴스에서 HTML/CSS를 렌더링하고 스크린샷을 찍습니다. 복잡하게 들리나요? 예, 그렇습니다. 특히 "대규모".

이를 위한 API가 있다는 것은 좋은 일입니다.

이 목적을 위해 특별히 구축한 APIHTML/CSS to Image API를 사용하여 이 작업을 수행하는 방법을 보여 드리겠습니다.

require "httparty"


auth = { username: 'user_id', password: 'api_key' }

html = "<div class=\"box\"><h3>Hello, world 😍</h3></div>"

css = ".box {
  border: 4px solid #8FB3E7;
  padding: 20px;
  color: white;
  font-size: 100px;
  width: 800px;
  height: 400px;
  font-family: 'Roboto';
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}"

image = HTTParty.post("https://hcti.io/v1/image",
                      body: { html: html, css: css },
                      basic_auth: auth)

# { url: https://hcti.io/v1/image/bfae7d68-86cc-4934-83ac-af3ba75a0d34 }

완료. 이미지 ✨가 있습니다.

레일 + 캐싱

Rails에서 생성하고 이미 memcached를 사용하고 있다면 한 번만 생성할 수 있는 좋은 방법이 있습니다.

cache_key = "image/#{html}/#{css}"

image = Rails.cache.fetch(cache_key) do
  HTTParty.post("https://hcti.io/v1/image",
                      body: { html: html, css: css },
                      basic_auth: auth)
end

html/css를 사용하여 캐시 키를 생성합니다. 너무 길다고 걱정하지 마세요. Rails/Dalli는 자동으로 키를 해시하여 고유하고 올바른 길이를 보장합니다.

이렇게 하면 정확히 동일한 페이로드를 다시 보내면 Rails는 URL을 다시 생성하지 않고 캐시에서 가져옵니다.

또 다른 레일스 팁

모든 콘텐츠에 대해 이러한 항목을 생성하는 경우 API 호출을 after_create 에 고정하고 싶을 수 있습니다. 나는 그것에 대해 조언합니다. "요청 시"I/O를 절대 최소로 유지하는 것이 항상 최선입니다. 요청이 30ms밖에 걸리지 않더라도 엔드포인트가 이미 많은 작업을 수행하고 있다면 시간이 더 걸릴 수 있습니다.

해결책은 백그라운드 작업을 사용하는 것입니다.

따라서 after_create 에서 직접 호출하는 대신. 대신 after_create 를 사용하여 백그라운드 작업을 대기열에 넣을 수 있습니다. 그러면 배경에 이미지가 생성됩니다. Rails 응답 시간을 매우 빠르게 유지합니다.

멋진 것을 만드시겠습니까?

이것으로 멋진 것을 만들면 알려주세요!