wannabe-jellyfish https://blog.hatena.ne.jp/wannabe-jellyfish/ くらげになりたい。 https://memory-lovers.blog/ SVG CloudFunction OGP Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、 いろいろ試してみたときの備忘録。 OGP画像の生成はクライアント側とサーバ側かがあるが、 Firestoreの変更に合わせて生成したいので、 Cloud Function上で利用できる方法を考えてた。 結果的に、 sharpで画像を合成してベースをつくり ImageMagickで文字を追記していく という構成になった。その試行錯誤の備忘録です。 やりたかったこと 背景画像+本の画像+文字みたいなOGP画像にしたい。 あと、座標の指定はめんどくさいので、楽な方法を探してみた。 SVGだとCSSも使えて、ブラウザ上で書くに… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmemory-lovers.blog%2Fentry%2F2020%2F02%2F19%2F150000" title="Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/w/wannabe-jellyfish/20200219/20200219142322.png Hatena Blog https://hatena.blog 2020-02-19 15:00:00 rich https://memory-lovers.blog/entry/2020/02/19/150000 1.0 100%