ご報告画像作成ツール
【ご報告】や「大切なお知らせ」で始まる文書を画像で作成。ダウンロード。Twitterに投稿するためのツール。 Canvasにテキストを描画するだけ。…だと禁則処理が厄介なので、画面上にレンダリングされたテキストを、1文字ずつspanのようなインライン要素にして、その位置をCanvas上で再現する。1文字ごとのspanでも禁則処理はされる。 code:要素の位置取得.js
document.querySelectorAll('.char').forEach((e) => console.log(e.innerText, e.getBoundingClientRect()))
編集フォーム
編集フォームのデフォルトは【ご報告】と奥付と、空欄の本文だけ
見出し3つ（左寄せ・中央寄せ・右寄せの順）
中央寄せに【ご報告】
本文欄
奥付欄（右寄せ）
日付
氏名・社名
手書きのサイン（画像）を入れられる
編集フォーム1つで1ページ。いくつでも+ボタンで追加可能。Twitterのように、空欄にすれば×で消せるようになる。
文章ブロックをいくつでも追加可能。
見出しと本文を組にしたもの。
どちらでも左寄せ・中央寄せ・右寄せを選べる。
スペースブロック
改ページブロック
出力先は画像なので用紙サイズがない。別画像にするだけの改ページ。
ブロックの順序入れ替え
プレビュー欄
spanをレンダリングするところ
これを見えないキャンバスで再現する
フォントサイズの基準値を増減、増減するたびにプレビュー更新
プレビュー欄はページごとに生成される
ページ番号の有無選択
1 / 3など
フォントの選択
Googleフォント
本文フォント・見出しフォントを選択
見出しフォントのデフォルトは本文フォントと同じ
編集フォームでプレビューできるようにして、プレビュー欄を無くしたい
キャンバス
周辺の不要な余白を削除
ページ数のぶんだけ生成される
ご報告画像1ページぶんを別ウィンドウで開くリンクを、ページごとに用意
その他
ローカルストレージに自動保存
ローカルストレージ含めて全部消すボタン
サイトのトップページは「このサイト作成のご報告」