テキストメッセージの画像ジェネレータをつくりました

See the Pen Untitled by Kohki_Takatama (@Kohki-Takatama) on CodePen.

※左のメッセージは画像です。

はじめに

メッセージを画像として（動的に）生成する機能です。

Xシェアとリンクカードでの仕様を想定しています。

ディレクトリ構造

.
├── canvas.js
├── index.html
├── main.js
└── style.css

canvas.jsは見やすさのために分けています。
実質 index.html / main.js / style.css の３ファイルです。

使用技術

技術	補足など
Canvas API	HTML/JSを使用しグラフィックを描画します（詳しくは Canvas API）
Konva.js	Canvas APIのライブラリです

• バニラのCanvas APIは使いにくいため、Konva.jsを使用しています（CDN）
  使い方：.htmlファイルに以下の記述をするだけ
  <script src="https://unpkg.com/konva@9/konva.min.js"></script>
• Konva.jsでできることの例
  • 丸角のボックスを簡単に描画できる

    // 丸角の白いボックスの描画
    const textbox = new Konva.Rect({
    x: textbox_mx,
    y: textbox_mt,
    width: stage.width() - textbox_mx * 2,
    height: textbox_height,
    fill: 'white',
    cornerRadius: 10,
    });
    layer.add(textbox);
    

  • 中央揃えを簡単に実装できる

    align: 'center',
    verticalAlign: 'middle',
    

  • 自動改行に対応
• 画像生成に使用できる html2canvas は以下の点から採用を見送りました
  • ブラウザによって表示が変わってしまう可能性がある（参考：html2canvasを試す）
  • 公式で「本番環境に使用するのは非推奨」と書かれている（開発途中のため）

機能紹介

動的に画像を生成	画像として保存が可能

• textareaへinputがあるたびに画像生成をすることで、動的生成を実現しています

  const input = document.getElementById('input');
  
  input.addEventListener('input', () => {
    generate_image(input.value.trim());
  });
  

今後の展望

• Xシェア用 画像のアップロード（クラウド？）
  • ユーザー操作なしで画像をツイートするには、画像を事前にサーバーへアップロードしなければいけない
  • リンクカードに画像を設定するのも同様。さらに、リンクカードごとにページを分ける必要がある
  • 現状、画像を保存しなくても逐次生成できる。そのメリットを消すことになってしまうのが難点

参考