作者:陳俊傑 / 臺灣大學計算機及資訊網路中心教學研究組幹事
根據《維基百科》的說明,Web服務是一種服務導向架構的技術,透過標準的Web協議提供服務,目的是保證不同平台的應用服務可以互操作[2]。因此,本文擬嘗試用不同技術所撰寫的簡易資料交換程式進行實驗,其流程及架構簡述如下:
1. C#、VB.Net、PHP均能自行將文字轉圖片。
2. C#、VB.Net負責提供Web服務,其服務內容是接受使用者所傳送的文字及其大小,然後轉換成圖片並編譯成Base64編碼,再回傳XML或Json格式。
3. 示範撰寫C#、VB.Net、PHP、ASP的資料交換程式。
文字轉圖片及資料交換流程架構
![](001/Upload/354/ckfile/bc1b28fd-3967-4ae8-ae4a-09068aa6975c.jpg)
圖一
作業環境
1. 作業系統:Windows 7 Service Pack 1
2. 網頁伺服器:IIS 7.5
3. 網頁語法:C#、VB.Net、PHP、ASP
4. 開發工具:Visual Studio 2010 Professional、Eclipse
前置作業:隨機挑選五個實驗用字
從《漢字古今字資料庫》網站,在「部件」輸入「學」,以搜尋結果的前五個字(含罕見字)作為實驗用字[3],並確認Word文件亦能正常顯示,如圖二:
![](001/Upload/354/ckfile/9bc87ea8-8d7e-4e05-bfd8-c85691edf294.jpg)
圖二
編輯Views / Shared版面配置頁(C#、VB.Net)
1. 新增「_LayoutTextToImage」檔案,如圖三: 補充:因HTML5的color類型並非所有瀏覽器均支援,而改選擇支援jQuery的顏色選擇器[4]。
接下來為了實際用console端操作範例,先建一個空的html檔來練習。其內容如下,其中加入了D3.js的連結。
![](001/Upload/354/ckfile/6265bf5a-1427-4542-88b3-b082ae2f5ffb.jpg)
圖三
2. head標籤內容,如圖四:
![](001/Upload/354/ckfile/618056e5-7ea7-4f1f-8f14-35102197c9da.jpg)
圖四
3. body標籤內容,如圖五:
![](001/Upload/354/ckfile/dff5822b-3a61-4dd6-894a-0171519a4ffa.jpg)
圖五
編輯Models模組(C#、VB.Net)
1. 新增CaptchaHelper(Class類別)檔案,如圖六:
![](001/Upload/354/ckfile/8882940a-013c-406a-87e6-537a7e367304.jpg)
圖六
2. 匯入指定的命令空間和類型,讓程式可直接參考,如圖七:
![](001/Upload/354/ckfile/7e5c4d3b-b2c3-407a-ac06-4fdbfa3559af.jpg)
圖七
3. 建立「取得及設定字型、字體、大小」清單,如圖八、圖九:
![](001/Upload/354/ckfile/fdf56e2c-98c7-419f-a2f6-718e340c9a25.jpg)
圖八
![](001/Upload/354/ckfile/3072f448-7171-41fe-bae3-ac8bc9a72742.jpg)
圖九
4. 建立「文字類別」,如圖十:
![](001/Upload/354/ckfile/5b70eff6-ba92-4e28-9beb-fc1722ea7349.jpg)
圖十
5. 建立「判斷顏色、字型、字體」功能,C#版本增加「判斷是否為數字」,如圖十一、圖十二:
![](001/Upload/354/ckfile/6f6e1043-25a5-41ac-b4ce-6ad923fbe204.jpg)
圖十一
![](001/Upload/354/ckfile/308b1a06-3007-495e-bf0b-209aed8dd6b0.jpg)
圖十二
6. 建立「文字轉圖片」及「圖片轉Base編碼」功能,如圖十三、圖十四:
![](001/Upload/354/ckfile/01819a0a-e82a-4193-89d9-12f58b5d7634.jpg)
圖十三
![](001/Upload/354/ckfile/2cf09dea-73f7-491c-9bc3-bc371fa27e9b.jpg)
圖十四
7. 建立「判斷資料是否異常,若無異常,則將文字轉成圖片」功能,如圖十五、圖十六:
![](001/Upload/354/ckfile/653496ef-c24e-4dff-ab86-f5860b1a1126.jpg)
圖十五
![](001/Upload/354/ckfile/610ab0dc-514a-4a01-8b0e-bfbc6117ce0c.jpg)
圖十六
新增Web服務項目(C#、VB.Net)
1. 新增TextToImageService.asmx(Web服務)檔案,如圖十七:
![](001/Upload/354/ckfile/e060f12a-2ace-471c-824e-ded293b9c1c7.jpg)
圖十七
2. 匯入指定的命令空間和類型,如圖十八:
![](001/Upload/354/ckfile/df937030-cca5-4b72-a752-79d357d41dc4.jpg)
圖十八
3. 建立「文字類別的格式」、「以XML格式回傳」及「以Json格式回傳」功能,如圖十九、圖二十:
![](001/Upload/354/ckfile/60e7b6cd-066c-458f-a759-a0abf211c20f.jpg)
圖十九
![](001/Upload/354/ckfile/3210d40f-38f7-4ddc-8d56-19f6d6ddffd0.jpg)
圖二十
新增服務參考項目(C#、VB.Net)
說明:新增Service References服務參考,結果如圖二十一:
![](001/Upload/354/ckfile/44334184-c5ec-4896-80bf-95ff53f0a788.jpg)
圖二十一
1. 選擇「加入服務參考」,如圖二十二:
![](001/Upload/354/ckfile/70d27a2d-394c-4a7c-a838-eaa650fb24a9.jpg)
圖二十二
2. 輸入Web服務「位址」、「命名空間」,再按「確定」即可,如圖二十三、圖二十四:
![](001/Upload/354/ckfile/6571665f-9793-4190-87e0-8d379aac4775.jpg)
圖二十三
![](001/Upload/354/ckfile/a527735b-c5e2-4d78-9a90-1a60c6f1fb3e.jpg)
圖二十四
編輯Controller控制器(C#、VB.Net)
1. 新增TextToImage(Controller控制器)檔案,如圖二十五:
![](001/Upload/354/ckfile/77d6127a-92e5-4bfe-b637-3850ea7b847a.jpg)
圖二十五
2. 匯入指定的命令空間和類型,如圖二十六:
![](001/Upload/354/ckfile/610e3ea1-00b2-4d95-803f-f0383148f213.jpg)
圖二十六
3. 建立「動作方法」及「資料交換」產生圖片功能,如圖二十七、圖二十八:
![](001/Upload/354/ckfile/4c8a7bd3-ac36-4411-a8a9-1d2dce3ec056.jpg)
圖二十七
![](001/Upload/354/ckfile/14a16e37-8119-4d73-94b0-87dc609c463f.jpg)
圖二十八
4. 建立「首頁」、「管理」的動作方法,如圖二十九、圖三十:
![](001/Upload/354/ckfile/ad371026-b95b-40c3-aa02-97e247ad60b0.jpg)
圖二十九
![](001/Upload/354/ckfile/69aa2c85-9e3e-4c9e-812e-d7a50bc3e3e2.jpg)
圖三十
編輯Views / Captcha檢視頁面(C#、VB.Net)
1. 新增Index(首頁)及Admin(管理)的檢視,如圖三十一:
![](001/Upload/354/ckfile/e536009b-3d56-42c0-a6e3-db164eb83714.jpg)
圖三十一
2. 編輯Index(首頁)檢視的內容,如圖三十二:
![](001/Upload/354/ckfile/68b7ce5f-199e-4973-9643-a4b9029d8e88.jpg)
圖三十二
3. 編輯Admin(管理)檢視的內容,如圖三十三、圖三十四:
![](001/Upload/354/ckfile/a9a8c1c9-4d60-41e4-97d2-7dcc5e7c21a1.jpg)
圖三十三
![](001/Upload/354/ckfile/13feead1-d9e5-4dfb-a34d-a02836491dfe.jpg)
圖三十四
預覽結果(C#、VB.Net)
利用Chrome瀏覽器確認,所輸入的實驗用字,其結果均能成功轉成圖片,如圖三十五、圖三十六:
![](001/Upload/354/ckfile/e07983e0-1f5d-4519-803f-ed415a8a5dc7.jpg)
圖三十五
![](001/Upload/354/ckfile/455efabd-062e-4940-b53c-20289b32c9a6.jpg)
圖三十六
如何撰寫【PHP】的資料交換?輸入罕見字的結果比較
1. 使用「Web Platform Installer」工具,選擇「架構」,安裝PHP相關套件,讓IIS能支援PHP語法,如圖三十七:
![](001/Upload/354/ckfile/b418e02e-6db3-482c-ad1c-3a52f48e510e.jpg)
圖三十七
2. PHP的檔案配置,如圖三十八:
![](001/Upload/354/ckfile/1a219e53-472a-45b7-8926-3794f94522bc.jpg)
圖三十八
3. 利用Chrome瀏覽器瀏覽Web服務,確認要呼叫的函式及要傳送的格式,以及接收結果的函式及格式,如圖三十九、圖四十:
![](001/Upload/354/ckfile/c46de775-cc05-4a7d-8ed1-c14798796d9b.jpg)
圖三十九
![](001/Upload/354/ckfile/102e96c8-3811-4e95-820e-775953552a2e.jpg)
圖四十
4. 編輯TextToImage.php檔案,如圖四十一~圖四十七:
![](001/Upload/354/ckfile/24500301-25af-4c0c-bae2-59bc0ce0d1e0.jpg)
圖四十一
![](001/Upload/354/ckfile/b7e249d5-9336-4c55-8448-1ce3e806f650.jpg)
圖四十二
![](001/Upload/354/ckfile/d4521272-52c2-4b53-b948-c3b7362d048d.jpg)
圖四十三
![](001/Upload/354/ckfile/60451b17-03be-4c68-9ee3-875b0c8670de.jpg)
圖四十四
![](001/Upload/354/ckfile/8e18ca45-4cf3-4a72-899b-7b7e686c3690.jpg)
圖四十五
![](001/Upload/354/ckfile/9c2313f8-625d-424a-9f0f-4e34c972c09f.jpg)
圖四十六
![](001/Upload/354/ckfile/4a019d7a-7323-49db-94bb-747b29ed5291.jpg)
圖四十七
5. 利用Chrome瀏覽器確認,所輸入的實驗用字,可能是因為PHP的GD函式對罕見字的支援不足,致使部分文字無法正常轉圖,實驗結果如圖四十八:
![](001/Upload/354/ckfile/91c28315-5402-4c95-91cc-ff5cd671bb46.jpg)
圖四十八
如何撰寫【ASP】的資料交換?
1. ASP的檔案配置,如圖四十九:
![](001/Upload/354/ckfile/3e2acfb3-c8d4-4d07-8165-ad8b754d421b.jpg)
圖四十九
2. 利用Chrome瀏覽器瀏覽Web服務,確認要呼叫的函式及要傳送的格式,以及接收結果的函式及格式,如圖五十、圖五十一:
![](001/Upload/354/ckfile/72de65e2-295a-4da6-9b16-e05331475d29.jpg)
圖五十
![](001/Upload/354/ckfile/be3634c5-da2a-44f9-ab3c-b459ca77fd6f.jpg)
圖五十一
3. 編輯TextToImage.php檔案,如圖五十二~圖五十六:
![](001/Upload/354/ckfile/34f00c2e-7a08-435f-8dbc-e6465e3e283b.jpg)
圖五十二
![](001/Upload/354/ckfile/393e5703-8df4-42e5-b410-cd2b68a68b5e.jpg)
圖五十三
![](001/Upload/354/ckfile/1694eb33-215b-4c35-9f32-b2abc0dca3be.jpg)
圖五十四
![](001/Upload/354/ckfile/4e399f56-6062-4679-828a-8f940a1c6c2c.jpg)
圖五十五
![](001/Upload/354/ckfile/9cbceaf8-211e-423c-8295-667ec7a23639.jpg)
圖五十六
4. 利用Chrome瀏覽器確認,所輸入的實驗用字,均能成功地透過資料交換取得Base64圖片編碼,實驗結果如圖四十八:
![](001/Upload/354/ckfile/9b62d3c3-711f-4a04-9dfe-08322c60f74f.jpg)
圖五十七
結論
實驗結果,Web服務能為不同的程式語言提供服務,且均能正確將文字轉成Base64編碼後回傳給使用者,可作為程式負擔移轉的參考。但其結果亦發現PHP的GD函式無法有效地將罕見字轉換成圖片的問題,僅能猜測可能是所參考的字型檔未包括該罕見字所致。而根據《維基百科》對「中日韓統一表意文字」的說明,仍有許多技術問題尚未解決[5]。因此,若有文字轉圖片的需求時,建議讓中文字支援程度較佳的伺服器及程式語言,透過以Web服務方式提供資料交換作為解決方案。
參考資料
[1]余至浩(2014年07月14日)。政府開放資料大體檢,哪些民眾最愛用?。IThome。線上檢索日期:2017年01月17日。網址:http://www.ithome.com.tw/news/89376
[2]Web服務。維基百科。檢上檢索日期:2011年01月14日。網址: https://zh.wikipedia.org/wiki/Web%E6%9C%8D%E5%8A%A1
[3]漢字古今字資料庫。行政院科技部、中央研究院歷史語言研究所和資訊科學研究所。檢上檢索日期:2011年01月14日。網址: http://xiaoxue.iis.sinica.edu.tw/ccdb
[4]jQuery版顏色選擇器。spectrum。檢上檢索日期:2011年01月14日。網址: https://bgrins.github.io/spectrum/
[5]中日韓統一表意文字。維基百科。檢上檢索日期:2011年01月14日。網址:https://zh.wikipedia.org/wiki/%E4%B8%AD%E6%97%A5%E9%9F%93%E
7%B5%B1%E4%B8%80%E8%A1%A8%E6%84%8F%E6%96%87%E5%AD%97