2013年2月25日

HTML5 Canvas 畫圖 Image and Text 筆記

我想要讓使用者可以使用網站上提供的圖片或是上傳圖片後,可以在圖片上加上文字組合成一個情境,正在想要怎麼做。

1. 可以在server上完成圖片合成,好處是沒有瀏覽器問題,字體的支援也很好控制,缺點是很可能不是WYSIWYG,斷行的位置可能會有點難處理,考慮到不同語言和字體,在server比較難模擬一段文字在瀏覽器斷行的位置,使用javascript抓斷行位置需要用span把每個字包起來計算,麻煩;還有沒辦法直接做功能延伸,比如說增加功能讓使用者用畫筆作畫,這部份到時候還是要改用HTML5 canvas來做,還有文字的邊框python image library沒有直接支援,要用ImageFilter來做。


2. 在client 使用html5 canvas來作圖,缺點是ie9之後才有支援canvas,瀏覽器兼容問題可能會很棘手,還有輸出圖片的時候可能還有一些canvas的security要處理,要轉成base64或是先傳到server,字體會有環境限制,要如何知道目前有什麼字體可以使用呢,尤其是非英語系的文字,有看過分體系用fallback機制+字體長度計算,也有用flash外掛計算的(wordmark),斷行位置還是一個問題,使用cavas作圖之後無法移植到非瀏覽器環境。

在client也可以使用true font

@font-face { font-family: 'KulminoituvaRegular'; src: url('http://www.miketaylr.com/f/kulminoituva.ttf'); }