目錄
可以線上產生類似上面的圖
工具網址：
https://tools.incognitas.net/toaru/
特色
- 自訂所有文字
- 自訂漸層顏色
- 自訂輸出的png大小
- 可儲存成svg
- 有直向/橫向兩種模板
使用方式
UI分成預覽區、屬性區、輸出區
屬性區
屬性區可以選擇圖片的方向，還有指定所有上面的文字，和漸層顏色。
漸層方向是從右上到左下，科学色和魔術色應該很好理解。
這些文字輸入區都有輔助填入，可以清空欄位來填入建議模板，或是手殘刪掉預設文字時可以快速復原。
輸出區
輸出大小是調整輸出成png的大小，將會照著直向/橫向設定鎖定寬和高的比例，如果調整太大的話會跑很久或是跳出超載例外，如果使用裝置效能不理想的話請耗子尾汁。
儲存為(save as)按鈕會將指定的格式下載至本機，但IOS好像有點問題，就看chrome什麼時候要修了。
開啟至新分頁(open in new tab)按鈕會開啟指定的格式在新分頁中。
製作想法
因為之前有需要使用とある生成器的需求，但是找過網路上其他人做的模板都太死了，主要是生成的圖片大小都是固定的，而且都很小，還有那些模板的假名不能改，我當時要用的字是「奇妙な」，但是模板的「の」就卡在那，後來我是直接F12他的原始碼來改成我要的解析度和「な」。
所以後來我就乾脆直接自己寫一個好了，讓模板能彈性一點，就參考當時被我F12的 本の虫：とあるjavascriptの画像生成 來作為文字的大小與座標的依據，因為我只有找到這家是用網頁(JS)做的，所以只能拆解這家。
為了能讓輸出的圖片是能自訂大小的，在前期生成時我用SVG來構圖，再用canvas渲染，讓使用者可以調整輸出的圖片大小，所以這個工具可以下載成png或是svg。
UI的文字輸入部分，我放了datalist來輔助填入預設值，讓一些沒裝日文輸入法又手殘把預設值刪掉的人，能不用重載就回復欄位。
填入建議選單
目前存在問題
目前Chromium系列瀏覽器突然對直排文字反應不良，不確定是bug還是正設。
其中文字座標計算變成(originx+text_width, originy+height)，理想應為(originx, originy+height)。