テキストボックスに画像の中に入れたい言葉を入れて「作成!」ボタンを押すと、画像が生成されます。
生成した画像は、ページ下部の「履歴」欄に一覧で表示され、後から確認や編集をすることができます。
localStorageを使用しているので、ページを閉じても履歴が消えることはありません。
GETパラメータでテキストボックスの値を指定することもできます。
例えば「武蔵工業大学(Musashi Institute of Technology)」という画像を生成するとします。
その場合、URLの末尾に「?univName=武蔵工業大学&univNameEng=Musa...gy&univColor=00a7eb」を付け加えることで、
指定された値の画像が生成された状態でこのようにページが開きます。
なお、GETパラメータが未設定の場合には初期値として「東京都市大学(TOKYO CITY UNIVERSITY)」が入力されます。
univName | 画像に入れる文字(日本語部分) |
univNameEng | 画像に入れる文字(英語部分) |
univColor | ロゴの色(#を除いたカラーコード) |
「Canvas API - Web API | MDN」https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
「Window.localStorage - Web API | MDN」https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
「URL.searchParams - Web API | MDN」https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams
「History.pushState() - Web API | MDN」https://developer.mozilla.org/ja/docs/Web/API/History/pushState