多災多難的Image Editor(二)

上次解決完CORS問題之後(自行寫一個PROXY傳回圖片解決), 老闆仍未收貨, 因為Toast UI Image Editor plugin 未能做到轉換text font family和object alignment的功能。結果把心一橫, 自行寫一個image editor功能出來。

自行寫editor很多災多難, 但滿足度很高, 因為很多功能也很有趣味, 使用時自由度很大 :)

使用了一個叫fabric JS的Tool, 它是一個專門為html5 canvas而設的library, 可以幫忙做到需求所要的功能:

1. 加入背景圖片
2. 無限加入文字objects
   (使用IText object可修改文字)
3. 無限加入圖片objects
4. 文字可轉換font family (Toast UI editor未能提供此功能)
5. 文字可bold
   (參考這裡)
6. 文字可italic
7. 文字可underline
8. 文字可Strike though
9. 文字可調顏色
   (使用了插件jscolor來輔助實現)
10. 文字和圖片objects可調opacity
    (使用了jQuery slider來輔助實現)
11. objects可一次靠左、靠右、靠上、靠下和置中對齊 (Toast UI editor未能提供此功能)
    (參考這裡 和 這裡 和 這裡)
12. 有一些指示線幫助objects對齊
    (參考這裡)
13. Undo / Redo
    (參考這裡)

寫時卡關了很久, 原因是call 了2次 new fabric.Canvas('myCanvas') 以致產生了2個overlapping fabric containers, 功能變得奇怪起來……

而且fabric js版本的問題, 網上的答案未必適合使用中的版本, 要找多個referemces整合。

還有使用jQuery dialog時因未有依據canvas height調整大小, 以致dialog移位得很厲害, 加入$('#tui-image-editor').dialog( "option", "height", newHeight ); 後變得好得多了。

其餘問題也解決得順暢得多了, 結果老闆也終於收貨了!