Login
Sign Up For Free
English
中文 (繁體)
中文 (香港)
中文 (简体)
日本語
Filipino
Bahasa Indonesia
Bahasa Melayu
Pусский
Português (Brasil)
Magyar
Français
Español
Deutsch
Čeština
العربية
Català
Dansk
Ελληνικά
فارسی
Suomi
Gaeilge
Hindi
עברית
Hrvatski
Italiano
Norsk bokmål
Nederlands
한국어
Polski
Română
Slovenský
Svenska
Türkçe
українська
беларуская
ไทย
Standard view
ಠ_ಠ
偷偷說
4 years ago
@Edit 4 years ago
#標籤
#表符
分享個自己寫的:
文字標籤表符製造機
自己輸入文字、選擇顏色、加入背景圖片等等就可以即時製作並下載png小圖(檔案名稱=輸入的文字.png),
很複雜又難用
功能很多哦~
請在電腦裡測試
這裡不多介紹(懂CSS的人就看得懂),直接看圖:
latest #34
ಠ_ಠ
說
4 years ago
@Edit 4 years ago
上述可以直接參考預設模板部份(按右上角打開模板及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)如果本身已經有色碼,可以直接輸入,不用打開色環
ಠ_ಠ
說
4 years ago
2)預設數字都是滑動輸入,滑得不夠精準可以直接選「數字輸入」
3)簡單預設了幾種模板(純粹示範):
ಠ_ಠ
說
4 years ago
4)自己設計完模板後,輸入名稱按儲存(不要包含特殊符號),那模板就會儲存到你的電腦的瀏覽器localstorage內,日後可重用
(換成別的電腦/瀏覽器或清理瀏覽器就會沒了)
ಠ_ಠ
說
4 years ago
5)匯出現時的模板資料/匯入一隻已有的模板資料(如果想存下來備份,或者跟別人分享模板的話就可能用到這個)
註:沒有批量匯入匯出(懶得幹)
ಠ_ಠ
說
4 years ago
其他應該沒什麼特別,有玩噗浪佈景就看得懂
ಠ_ಠ
說
4 years ago
嗯~對了,進階的玩法,自訂CSS可以玩基本漸層或其他。
例如把下面的貼上製造器的JSON,匯入:
{ (Plurk Paste)
就會得出這個:
不過真的很進階了,而且只支援較簡單的。
ಠ_ಠ
說
4 years ago
--------說完--------
ಠ_ಠ
說
4 years ago
……結果還是手癢多弄了東西,應該真的不會再有新功能吧,我想不到能進一步玩的了!再多功能也會超亂的!
6)背景圖功能
上傳電腦裡的圖片至瀏覽器(不會上傳到伺服器,沒有這玩意)。
可以點開「模板」再挑選預設組別的「噗幣」試看效果:
外框和內框都可以設圖,耐心調整細節下可以達到這種效果:
ಠ_ಠ
說
4 years ago
@Edit 4 years ago
7)white-space屬性(文字換行不換行)
勉強可以做到垂直字的效果(不過真的很勉強),繪圖軟件比較輕鬆和準確調整字與字的距離
利用不換行(文字部份>空白=正常)達到這種效果:
ಠ_ಠ
說
4 years ago
應該真的沒有更多功能吧,想不到別的了,頂多再研究批量匯入匯出模板……
ಠ_ಠ
說
4 years ago
@Edit 4 years ago
1.1版,功能更新:
1)批量匯入匯出儲存在本機的模板,匯入成功會顯示模板名字:
2)非即時渲染。如果選顏色、打字覺得很卡,可以在上方取消「即時渲染」,可以利用HTML放大版本進行即時預覽作為輔助。
3)進階編輯:就是進階到讓你直接輸入CSS
4)預設模板更新,純屬功能示範
ಠ_ಠ
說
4 years ago
@Edit 4 years ago
由於功能太多會影響現時的資料,我也想不出更多功能了(連CSS都能直接輸入了已經無敵啦),日後有心情才會修正bug。
已知問題:
.本機儲存不了太多自訂模板
.Edge好像下載不了
.非即時渲染時,匯入JSON後沒有即時更新圖片
taro9559
說
4 years ago
@Edit 4 years ago
想請問我該怎麼操作才能讓生成圖片一起變呢? 不好意思,還來叨擾你。
ಠ_ಠ
說
4 years ago
@Edit 4 years ago
taro9559: 你說的是上面提到的已知問題嗎?
.非即時渲染時,匯入JSON後沒有即時更新圖片(日後有心情才會修正bug)
你可以按一下最上方的「即時渲染」,或在文字上隨便打一打再離開文字框(點一下頁面的空白部份)試試
如果還不行你要提供步驟和說明用哪款瀏覽器了
taro9559
說
4 years ago
@Edit 4 years ago
應該說,即使我不使用模板,我的生成圖片也部會改變,我有試著按了即時渲染,但也是毫無反應,對不起我問題真的很多,我的步驟就是,改字然後一步一步調整顏色數據,可是不管怎麼按空白處,會變得都只有HTML,然後我是使用CHROME的,不好意思一直打您,不好意思一直打您,麻煩了,謝謝。
ಠ_ಠ
說
4 years ago
taro9559: 從來沒有成功嗎?這個可能幫不了你
因為我在win 7 / win 10上跑chrome最新版本都沒有這個問題:
如果你想進一步問,那要按Ctrl + Shift + I打開開發工具,然後重整頁面,再試試打字調色
如果右邊冒出紅色error文字你可以截圖看看,有可能是script不相容之類,但較難修正
ಠ_ಠ
說
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
delete
reply
edit
cancel
cancel