ಠ_ಠ 偷偷說
4 years ago @Edit 4 years ago
#標籤 #表符
分享個自己寫的:文字標籤表符製造機
自己輸入文字、選擇顏色、加入背景圖片等等就可以即時製作並下載png小圖(檔案名稱=輸入的文字.png),很複雜又難用 功能很多哦~
請在電腦裡測試
這裡不多介紹(懂CSS的人就看得懂),直接看圖:
https://images.plurk.com/5O3qA4jVZKuwkUf1pSl6YZ.png https://images.plurk.com/4VZQPJFWt56k68afqgSrVZ.png
latest #34
ಠ_ಠ
4 years ago @Edit 4 years ago
https://images.plurk.com/2v6vGpQQo0TbB7R4avRNsf.png https://images.plurk.com/7p0lyvksyMi7ordK5VaZ5f.png https://images.plurk.com/6h0r2bB1G3mj4RLj4VhB8S.png https://images.plurk.com/56VEOgUqNUblAUnA6QHm0d.png https://images.plurk.com/vjfOj6KBQi2CKyPCheRZU.png https://images.plurk.com/5bSLO5pCPC4ixuz9jrHNS.png
上述可以直接參考預設模板部份(按右上角打開模板及JSON區)
ಠ_ಠ
4 years ago @Edit 4 years ago
可以弄出簡單但多樣化的款式(圖片、顏色漸層那些就算了,太麻煩)
如果有bug也不管了,好懶……
ಠ_ಠ
4 years ago @Edit 4 years ago
注意事項
.瀏覽器網頁放大縮小可能會導致儲存圖片跟著改變尺寸。
. 圖片大小不一定等於標籤部份的高度/寬度,還要再加上邊框大小。
立即下載
lord2910
4 years ago
請問是是以前那個標籤製作機的作者嗎
ಠ_ಠ
4 years ago
弄這個的主因是想有個極速弄文字模板的方法,不過興奮地寫完小程式後就懶得用了(倒)
ಠ_ಠ
4 years ago @Edit 4 years ago
lord2910: 不是,我也是逛表符時看到以前有這個製造器
ಠ_ಠ - 分享如下表符,順便也接受許願 (? 許願請提供 內容文字(中文不超過 3 字) + ant9...不過我是參考後完全重寫,然後寫得超複雜,一般人不太容易上手……(咳)
ಠ_ಠ
4 years ago @Edit 4 years ago
所以想要簡單款的,用前人製作的就很足夠了
我弄的比較亂和慢
慢的原因應該是即時畫圖及預覽
lord2910
4 years ago
我覺得都很厲害,謝謝
sundae7604
4 years ago
您太強了謝謝
ಠ_ಠ
4 years ago
啊,話說好像只有電腦版chrome能成功跑啊,晚點再思考下
ಠ_ಠ
4 years ago @Edit 4 years ago
已更新最新版本,應該chrome/edge/firefox等等都能跑了。
因為功能算是很完整,日後大概就不更新了。
簡單總結一下功能:
1)如果本身已經有色碼,可以直接輸入,不用打開色環
https://images.plurk.com/1Gqo4tTS43SBLMlzW5BZYO.png
ಠ_ಠ
4 years ago
2)預設數字都是滑動輸入,滑得不夠精準可以直接選「數字輸入」
https://images.plurk.com/oTODwwlAfKPUSNDTmJFU8.png https://images.plurk.com/2OZFYRu2JBM1ObAc4nPEma.png
3)簡單預設了幾種模板(純粹示範):
https://images.plurk.com/1vbXin6A17EnWGOR4wDahT.png
ಠ_ಠ
4 years ago
4)自己設計完模板後,輸入名稱按儲存(不要包含特殊符號),那模板就會儲存到你的電腦的瀏覽器localstorage內,日後可重用
(換成別的電腦/瀏覽器或清理瀏覽器就會沒了)
https://images.plurk.com/1ikr7zC1PrqViqxe2cfewv.png https://images.plurk.com/4PIiR00ViYKNNMih0A4aGW.png
ಠ_ಠ
4 years ago
5)匯出現時的模板資料/匯入一隻已有的模板資料(如果想存下來備份,或者跟別人分享模板的話就可能用到這個)
註:沒有批量匯入匯出(懶得幹)
https://images.plurk.com/68xuGoRwks3QAdWwxjWTAM.png
ಠ_ಠ
4 years ago
其他應該沒什麼特別,有玩噗浪佈景就看得懂
ಠ_ಠ
4 years ago
嗯~對了,進階的玩法,自訂CSS可以玩基本漸層或其他。
例如把下面的貼上製造器的JSON,匯入:
{ (Plurk Paste)
就會得出這個:
https://images.plurk.com/6SLBoQItn5Xq0kc30SLylc.png
https://images.plurk.com/11Y6QlcYbtidDwYiPQ9SAN.png
不過真的很進階了,而且只支援較簡單的。
ಠ_ಠ
4 years ago
--------說完--------
ಠ_ಠ
4 years ago
……結果還是手癢多弄了東西,應該真的不會再有新功能吧,我想不到能進一步玩的了!再多功能也會超亂的!
6)背景圖功能
上傳電腦裡的圖片至瀏覽器(不會上傳到伺服器,沒有這玩意)。
可以點開「模板」再挑選預設組別的「噗幣」試看效果:
https://images.plurk.com/45P37QeLpZCdhDXDih7bLB.png
https://images.plurk.com/pWxH0YTKyWixMNlasVKs3.png
外框和內框都可以設圖,耐心調整細節下可以達到這種效果:
https://images.plurk.com/km31Uu0gFXDJ3eA068DjV.png
ಠ_ಠ
4 years ago @Edit 4 years ago
7)white-space屬性(文字換行不換行)
勉強可以做到垂直字的效果(不過真的很勉強),繪圖軟件比較輕鬆和準確調整字與字的距離
https://images.plurk.com/JJpv5xY8WZRZVnkKstbCn.png
利用不換行(文字部份>空白=正常)達到這種效果:
https://images.plurk.com/5urbWd0rfvUoh1lKtXURog.png
https://images.plurk.com/5LUPYjgBbmpatTrOQqleDz.png
ಠ_ಠ
4 years ago
應該真的沒有更多功能吧,想不到別的了,頂多再研究批量匯入匯出模板……
ಠ_ಠ
4 years ago @Edit 4 years ago
1.1版,功能更新:
1)批量匯入匯出儲存在本機的模板,匯入成功會顯示模板名字:
https://images.plurk.com/1p5FmTRgcPwpIC27f5pWJs.png
2)非即時渲染。如果選顏色、打字覺得很卡,可以在上方取消「即時渲染」,可以利用HTML放大版本進行即時預覽作為輔助。
3)進階編輯:就是進階到讓你直接輸入CSS
4)預設模板更新,純屬功能示範
https://images.plurk.com/7uA2Q0TQ0Fq9tCGGFOfOlH.png https://images.plurk.com/kXzDrtoCVoHa0z4hboEMP.png
ಠ_ಠ
4 years ago @Edit 4 years ago
由於功能太多會影響現時的資料,我也想不出更多功能了(連CSS都能直接輸入了已經無敵啦),日後有心情才會修正bug。
已知問題:
.本機儲存不了太多自訂模板
.Edge好像下載不了
.非即時渲染時,匯入JSON後沒有即時更新圖片
taro9559
4 years ago @Edit 4 years ago
https://images.plurk.com/2JHjJH0fXlljuXdFeyKSLX.jpg 想請問我該怎麼操作才能讓生成圖片一起變呢? 不好意思,還來叨擾你。
ಠ_ಠ
4 years ago @Edit 4 years ago
taro9559: 你說的是上面提到的已知問題嗎?
.非即時渲染時,匯入JSON後沒有即時更新圖片(日後有心情才會修正bug)

你可以按一下最上方的「即時渲染」,或在文字上隨便打一打再離開文字框(點一下頁面的空白部份)試試
如果還不行你要提供步驟和說明用哪款瀏覽器了
taro9559
4 years ago @Edit 4 years ago
https://images.plurk.com/2BohWcH8ZJt64CVCt1LZwB.png https://images.plurk.com/4TlqaxqFHYdvzsyp6jFpoq.png 應該說,即使我不使用模板,我的生成圖片也部會改變,我有試著按了即時渲染,但也是毫無反應,對不起我問題真的很多,我的步驟就是,改字然後一步一步調整顏色數據,可是不管怎麼按空白處,會變得都只有HTML,然後我是使用CHROME的,不好意思一直打您,不好意思一直打您,麻煩了,謝謝。
ಠ_ಠ
4 years ago
taro9559: 從來沒有成功嗎?這個可能幫不了你
因為我在win 7 / win 10上跑chrome最新版本都沒有這個問題:
https://images.plurk.com/6ZxnYGROqX4GWiXbs5aeDW.png https://images.plurk.com/4rdcjAQp3pZ9UsduJP2tDS.png
如果你想進一步問,那要按Ctrl + Shift + I打開開發工具,然後重整頁面,再試試打字調色
如果右邊冒出紅色error文字你可以截圖看看,有可能是script不相容之類,但較難修正
https://images.plurk.com/2R1DXg6bViXOJU6zlb6AYe.png
ಠ_ಠ
4 years ago
要不然就換個瀏覽器,例如firefox / chromium了……
taro9559
4 years ago
好的,謝謝您這麼認真的回答我,我會試試看的,太感謝您了,不管是設計出這個頁面還是願意回覆我,辛苦了
oreo2984
3 years ago
太屌了!!!! 神!!!!!
berry1521
2 years ago
好想知道噗主是怎麼做的,太強大了
ಠ_ಠ
2 years ago
就……寫程式做的,唸資工的肯定能寫出來的初階程度吧
一年後還未bugfix
dwarf1016
2 years ago
ಠ_ಠ: 不好意思路過推一下舊文,想請問若我想使用justfont提供的「open 粉圓」字體則字型欄該填什麼呢?謝謝
ಠ_ಠ
2 years ago
dwarf1016: 我沒有用justfont字型,不清楚
open 粉圓網頁裡的font-family是「jf-openhuninn」
你可以在電腦安裝字體後試試看
dwarf1016
2 years ago
ಠ_ಠ: 謝謝!
back to top