ಠ_ಠ
@anonymous
偷偷說
Tue, Feb 25, 2020 1:06 PM
Thu, Feb 27, 2020 2:37 PM
180
39
2
標籤
表符
分享個自己寫的:
文字標籤表符製造機
自己輸入文字、選擇顏色、加入背景圖片等等就可以即時製作並下載png小圖(檔案名稱=輸入的文字.png),
很複雜又難用
功能很多哦~
請在電腦裡測試
這裡不多介紹(懂CSS的人就看得懂),直接看圖:
ಠ_ಠ
說
Tue, Feb 25, 2020 1:06 PM
Fri, Feb 28, 2020 3:22 PM
上述可以直接參考預設模板部份(按右上角打開模板及JSON區)
ಠ_ಠ
說
Tue, Feb 25, 2020 1:08 PM
Tue, Feb 25, 2020 1:20 PM
可以弄出簡單但多樣化的款式(圖片、顏色漸層那些就算了,太麻煩)
如果有bug也不管了,好懶……
ಠ_ಠ
說
Tue, Feb 25, 2020 1:11 PM
Thu, Feb 27, 2020 10:44 AM
注意事項
.瀏覽器網頁放大縮小可能會導致儲存圖片跟著改變尺寸。
. 圖片大小不一定等於標籤部份的高度/寬度,還要再加上邊框大小。
lord2910
Tue, Feb 25, 2020 1:13 PM
請問是是以前那個標籤製作機的作者嗎
ಠ_ಠ
說
Tue, Feb 25, 2020 1:13 PM
弄這個的主因是想有個極速弄文字模板的方法,不過興奮地寫完小程式後就懶得用了(倒)
ಠ_ಠ
說
Tue, Feb 25, 2020 1:14 PM
Tue, Feb 25, 2020 2:03 PM
lord2910: 不是,我也是逛表符時看到以前有這個
製造器
:
ಠ_ಠ - 分享如下表符,順便也接受許願 (? 許願請提供 內容文字(中文不超過 3 字) + ant9...
不過我是參考後完全重寫,然後寫得超複雜,一般人不太容易上手……(咳)
ಠ_ಠ
說
Tue, Feb 25, 2020 1:15 PM
Fri, Feb 28, 2020 3:23 PM
所以想要簡單款的,用前人製作的就很足夠了
我弄的比較亂和慢
慢的原因應該是即時畫圖及預覽
lord2910
Tue, Feb 25, 2020 1:16 PM
我覺得都很厲害,謝謝
sundae7604
Tue, Feb 25, 2020 2:36 PM
您太強了謝謝
ಠ_ಠ
說
Tue, Feb 25, 2020 3:08 PM
啊,話說好像只有電腦版chrome能成功跑啊,晚點再思考下
ಠ_ಠ
說
Wed, Feb 26, 2020 5:10 AM
Thu, Feb 27, 2020 10:42 AM
已更新最新版本,應該chrome/edge/firefox等等都能跑了。
因為功能算是很完整,日後大概就不更新了。
簡單總結一下功能:
1)如果本身已經有色碼,可以直接輸入,不用打開色環
ಠ_ಠ
說
Wed, Feb 26, 2020 5:20 AM
2)預設數字都是滑動輸入,滑得不夠精準可以直接選「數字輸入」
3)簡單預設了幾種模板(純粹示範):
ಠ_ಠ
說
Wed, Feb 26, 2020 5:33 AM
4)自己設計完模板後,輸入名稱按儲存(不要包含特殊符號),那模板就會儲存到你的電腦的瀏覽器localstorage內,日後可重用
(換成別的電腦/瀏覽器或清理瀏覽器就會沒了)
ಠ_ಠ
說
Wed, Feb 26, 2020 5:38 AM
5)匯出現時的模板資料/匯入一隻已有的模板資料(如果想存下來備份,或者跟別人分享模板的話就可能用到這個)
註:沒有批量匯入匯出(懶得幹)
ಠ_ಠ
說
Wed, Feb 26, 2020 5:42 AM
其他應該沒什麼特別,有玩噗浪佈景就看得懂
ಠ_ಠ
說
Wed, Feb 26, 2020 7:38 AM
嗯~對了,進階的玩法,自訂CSS可以玩基本漸層或其他。
例如把下面的貼上製造器的JSON,匯入:
{ (Plurk Paste)
就會得出這個:
不過真的很進階了,而且只支援較簡單的。
ಠ_ಠ
說
Wed, Feb 26, 2020 7:41 AM
--------說完--------
ಠ_ಠ
說
Thu, Feb 27, 2020 2:15 PM
……結果還是手癢多弄了東西,應該真的不會再有新功能吧,我想不到能進一步玩的了!再多功能也會超亂的!
6)背景圖功能
上傳電腦裡的圖片至瀏覽器(不會上傳到伺服器,沒有這玩意)。
可以點開「模板」再挑選預設組別的「噗幣」試看效果:
外框和內框都可以設圖,耐心調整細節下可以達到這種效果:
ಠ_ಠ
說
Thu, Feb 27, 2020 2:26 PM
Thu, Feb 27, 2020 2:27 PM
7)white-space屬性(文字換行不換行)
勉強可以做到垂直字的效果(不過真的很勉強),繪圖軟件比較輕鬆和準確調整字與字的距離
利用不換行(文字部份>空白=正常)達到這種效果:
ಠ_ಠ
說
Thu, Feb 27, 2020 2:34 PM
應該真的沒有更多功能吧,想不到別的了,頂多再研究批量匯入匯出模板……
ಠ_ಠ
說
Fri, Feb 28, 2020 3:36 PM
Fri, Feb 28, 2020 3:42 PM
1.1版,功能更新:
1)批量匯入匯出儲存在本機的模板,匯入成功會顯示模板名字:
2)非即時渲染。如果選顏色、打字覺得很卡,可以在上方取消「即時渲染」,可以利用HTML放大版本進行即時預覽作為輔助。
3)進階編輯:就是進階到讓你直接輸入CSS
4)預設模板更新,純屬功能示範
ಠ_ಠ
說
Fri, Feb 28, 2020 3:37 PM
Sat, Feb 29, 2020 4:24 AM
由於功能太多會影響現時的資料,我也想不出更多功能了(連CSS都能直接輸入了已經無敵啦),日後有心情才會修正bug。
已知問題:
.本機儲存不了太多自訂模板
.Edge好像下載不了
.非即時渲染時,匯入JSON後沒有即時更新圖片
taro9559
說
Thu, Mar 26, 2020 5:53 PM
Thu, Mar 26, 2020 5:55 PM
想請問我該怎麼操作才能讓生成圖片一起變呢? 不好意思,還來叨擾你。
ಠ_ಠ
說
Thu, Mar 26, 2020 10:51 PM
Thu, Mar 26, 2020 10:52 PM
taro9559: 你說的是上面提到的已知問題嗎?
.非即時渲染時,匯入JSON後沒有即時更新圖片(日後有心情才會修正bug)
你可以按一下最上方的「即時渲染」,或在文字上隨便打一打再離開文字框(點一下頁面的空白部份)試試
如果還不行你要提供步驟和說明用哪款瀏覽器了
taro9559
說
Fri, Mar 27, 2020 5:01 AM
Fri, Mar 27, 2020 5:06 AM
應該說,即使我不使用模板,我的生成圖片也部會改變,我有試著按了即時渲染,但也是毫無反應,對不起我問題真的很多,我的步驟就是,改字然後一步一步調整顏色數據,可是不管怎麼按空白處,會變得都只有HTML,然後我是使用CHROME的,不好意思一直打您,不好意思一直打您,麻煩了,謝謝。
ಠ_ಠ
說
Fri, Mar 27, 2020 5:44 AM
taro9559: 從來沒有成功嗎?這個可能幫不了你
因為我在win 7 / win 10上跑chrome最新版本都沒有這個問題:
如果你想進一步問,那要按Ctrl + Shift + I打開開發工具,然後重整頁面,再試試打字調色
如果右邊冒出紅色error文字你可以截圖看看,有可能是script不相容之類,但較難修正
ಠ_ಠ
說
Fri, Mar 27, 2020 5:46 AM
要不然就換個瀏覽器,例如firefox / chromium了……
taro9559
Fri, Mar 27, 2020 5:49 AM
好的,謝謝您這麼認真的回答我,我會試試看的,太感謝您了,不管是設計出這個頁面還是願意回覆我,辛苦了
oreo2984
說
Wed, Jun 10, 2020 10:05 AM
太屌了!!!! 神!!!!!
berry1521
Tue, Aug 17, 2021 9:38 AM
好想知道噗主是怎麼做的,太強大了
ಠ_ಠ
Tue, Aug 17, 2021 10:03 AM
就……寫程式做的,唸資工的肯定能寫出來的初階程度吧
一年後還未bugfix
dwarf1016
Tue, Jan 18, 2022 6:54 AM
ಠ_ಠ: 不好意思路過推一下舊文,想請問若我想使用justfont提供的「open 粉圓」字體則字型欄該填什麼呢?謝謝
ಠ_ಠ
Tue, Jan 18, 2022 7:34 AM
dwarf1016: 我沒有用justfont字型,不清楚
open 粉圓網頁裡的font-family是「jf-openhuninn」
你可以在電腦安裝字體後試試看
dwarf1016
Tue, Jan 18, 2022 7:39 AM
ಠ_ಠ: 謝謝!
mussel8922
Tue, Jun 4, 2024 11:46 PM
謝謝噗主是天使🙏
載入新的回覆
分享個自己寫的:文字標籤表符製造機
自己輸入文字、選擇顏色、加入背景圖片等等就可以即時製作並下載png小圖(檔案名稱=輸入的文字.png),
很複雜又難用功能很多哦~請在電腦裡測試
這裡不多介紹(懂CSS的人就看得懂),直接看圖:
上述可以直接參考預設模板部份(按右上角打開模板及JSON區)
如果有bug也不管了,好懶……
.瀏覽器網頁放大縮小可能會導致儲存圖片跟著改變尺寸。
. 圖片大小不一定等於標籤部份的高度/寬度,還要再加上邊框大小。
我弄的比較亂和慢
慢的原因應該是即時畫圖及預覽
因為功能算是很完整,日後大概就不更新了。
簡單總結一下功能:
1)如果本身已經有色碼,可以直接輸入,不用打開色環
3)簡單預設了幾種模板(純粹示範):
(換成別的電腦/瀏覽器或清理瀏覽器就會沒了)
註:沒有批量匯入匯出(懶得幹)
例如把下面的貼上製造器的JSON,匯入:
{ (Plurk Paste)
就會得出這個:
不過真的很進階了,而且只支援較簡單的。
6)背景圖功能
上傳電腦裡的圖片至瀏覽器(不會上傳到伺服器,沒有這玩意)。
可以點開「模板」再挑選預設組別的「噗幣」試看效果:
外框和內框都可以設圖,耐心調整細節下可以達到這種效果:
勉強可以做到垂直字的效果(不過真的很勉強),繪圖軟件比較輕鬆和準確調整字與字的距離
利用不換行(文字部份>空白=正常)達到這種效果:
1)批量匯入匯出儲存在本機的模板,匯入成功會顯示模板名字:
2)非即時渲染。如果選顏色、打字覺得很卡,可以在上方取消「即時渲染」,可以利用HTML放大版本進行即時預覽作為輔助。
3)進階編輯:就是進階到讓你直接輸入CSS
4)預設模板更新,純屬功能示範
已知問題:
.本機儲存不了太多自訂模板
.Edge好像下載不了
.非即時渲染時,匯入JSON後沒有即時更新圖片
.非即時渲染時,匯入JSON後沒有即時更新圖片(日後有心情才會修正bug)
你可以按一下最上方的「即時渲染」,或在文字上隨便打一打再離開文字框(點一下頁面的空白部份)試試
如果還不行你要提供步驟和說明用哪款瀏覽器了
因為我在win 7 / win 10上跑chrome最新版本都沒有這個問題:
如果你想進一步問,那要按Ctrl + Shift + I打開開發工具,然後重整頁面,再試試打字調色
如果右邊冒出紅色error文字你可以截圖看看,有可能是script不相容之類,但較難修正
一年後還未bugfixopen 粉圓網頁裡的font-family是「jf-openhuninn」
你可以在電腦安裝字體後試試看