とある線上の画像生成—とある線上製作工具

可以線上產生類似上面的圖
工具網址：https://tools.incognitas.net/toaru/

特色

UI分成預覽區、屬性區、輸出區

屬性區可以選擇圖片的方向，還有指定所有上面的文字，和漸層顏色。
漸層方向是從右上到左下，科学色和魔術色應該很好理解。

這些文字輸入區都有輔助填入，可以清空欄位來填入建議模板，或是手殘刪掉預設文字時可以快速復原。

輸出大小是調整輸出成png的大小，將會照著直向/橫向設定鎖定寬和高的比例，如果調整太大的話會跑很久或是跳出超載例外，如果使用裝置效能不理想的話請耗子尾汁。

儲存為(save as)按鈕會將指定的格式下載至本機，但IOS好像有點問題，就看chrome什麼時候要修了。

開啟至新分頁(open in new tab)按鈕會開啟指定的格式在新分頁中。

因為之前有需要使用とある生成器的需求，但是找過網路上其他人做的模板都太死了，主要是生成的圖片大小都是固定的，而且都很小，還有那些模板的假名不能改，我當時要用的字是「奇妙な」，但是模板的「の」就卡在那，後來我是直接F12他的原始碼來改成我要的解析度和「な」。

所以後來我就乾脆直接自己寫一個好了，讓模板能彈性一點，就參考當時被我F12的本の虫：とあるjavascriptの画像生成來作為文字的大小與座標的依據，因為我只有找到這家是用網頁(JS)做的，所以只能拆解這家。

為了能讓輸出的圖片是能自訂大小的，在前期生成時我用SVG來構圖，再用canvas渲染，讓使用者可以調整輸出的圖片大小，所以這個工具可以下載成png或是svg。

UI的文字輸入部分，我放了datalist來輔助填入預設值，讓一些沒裝日文輸入法又手殘把預設值刪掉的人，能不用重載就回復欄位。

目前Chromium系列瀏覽器突然對直排文字反應不良，不確定是bug還是正設。
其中文字座標計算變成(origin_x+text_width, origin_y+height)，理想應為(origin_x, origin_y+height)。