Help us understand the problem. What is going on with this article?

画像生成してOGPに設定する

目的

ユーザーによって異なる画像を生成し、OGPに設定する。

それぞれのやり方のメリット・デメリット

画像生成には下記2つやり方がある。

  • クライアントサイドでhtml2canvasを用いて画像生成
  • imagemagickでサーバサイドで画像生成

もしアプリ展開してクライアントサイドが複数になる場合はサーバサイドで一括して処理したほうが工数も減り良さそう。html2canvasのほうがcssなどでレイアウトをいじれるので細かい調整は効きそう。

imagemagicのメリットデメリット

メリット

  • サーバサイド側で処理したらユーザー側の環境の影響受けなさそう。

デメリット

  • 日本語だと折返しの処理を自分で書かないといけないのが面倒だし難しい
  • 複数フォントを読み込めない
  • 色付きの絵文字フォントを扱えない

html2canvasのメリットデメリット

メリット

  • imagemagicよりはデザイン調整楽そう

デメリット

  • 対応していないcssがあるので注意
  • ユーザーのブラウザによってデザインが微妙に変わる

html2canvasを用いて画像生成

全体設計

  • html2canvasで画像を生成
  • javascriptからbase64→blobに変換
  • hidden_fieldでcarriwave経由でサーバに送る

そもそもcanvasとは?

ブラウザ上で図を書くための仕様でhtml5で採用されている。タグでhtmlのスペースを規定してその中でjavascriptを用いて描画する。

html2canvasの導入

ドキュメント
http://html2canvas.hertzen.com/documentation

npmで導入する。詳しい導入方法は上記。

html2canvasで任意のDOMを画像に

//ロードされた際の処理として実施:
window.onload = function(){
  //HTML内に画像を表示
  html2canvas(document.getElementById("target"),{
    onrendered: function(canvas){
      //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
      var imgData = canvas.toDataURL();
      document.getElementById("result").src = imgData;
    }
  });
}

引用:https://qiita.com/youwht/items/8b681a856f59aa82d671

html2canvasは#targetに指定したidをキャプチャする。

appendChildについて

appendChildは、特定の親要素の中に要素を追加するためのメソッドです。javascriptで使われるものでjqueryだとappendのみ

「【JavaScript入門】appendと何が違う?appendChild徹底解説」
引用:https://www.sejuku.net/blog/49970

画像をbase64→blobに変換

textform経由で送信

生成した画像を保存

https://qiita.com/you8/items/d5f157a428e3fffa35e3

rails+carrierwaveで画像保存する方法は上記。

ブラウザに表示させたくない場合

隠しDOMで別に作っておいてoverflow:hiddenで隠す方法があるらしい(未確認。誰か教えて)

retina対応

html2canvasのデフォルト設定では、生成された画像をRetinaディスプレイで見たときに、画質が荒くなってしまいます。 公式対応は現状されていないのですが、なんと有志の手によってRetina対応が可能となりました。 https://github.com/niklasvh/html2canvas/pull/1087

ファイルを一部書き換える手間は生じますが、その後はdpi, scaleオプションを設定することで、生成された画像を綺麗に表示することが可能となります。 ただし、サイズや画質を上げると、その分レンダリング処理に時間がかかり、また上記の描画領域制限に引っかかる可能性があるので、注意が必要です。

引用:https://techblog.kayac.com/html2canvas

puppeteerを使う(調査中)

https://github.com/GoogleChrome/puppeteer

svgから生成

https://qiita.com/serinuntius/items/3017fb6ef51cd47352f6#ogp%E8%A1%A8%E7%A4%BA%E5%81%B4cloudfunction%E3%82%B3%E3%83%BC%E3%83%89

「Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう」を実際に作ってみる」
https://qiita.com/kanye__east/items/6cbcdc8fe5103084c737

この記事ではsvgに文字を出して画像化している。ただこのやり方だとおそらく改行ができない。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした