Are U a robot ?
2020/05/31
專案連結：https://ciao-chung.github.io/are-you-a-robot/
開發時間：2018年7月
開發動機
常常在網路上看到類似這種很有趣的自製Recaptcha
像是找出胡瓜跟阿信
或是找出宋少卿、屈中恆、鈕承澤
不過如果要自己透過PhotoShop來做又太麻煩
所以我才想說自己做一個Web版的產生器來給大家玩
Demo影片
功能
其實功能也不難
就大概這幾項
- 可以自己設定標題
- 可以自己上圖並且做修改(裁切、旋轉、縮放)
- 圖片可排序
- 可以修改圖片數量
- 可以匯出圖片
- I18n
技術說明
網站主體
使用Vue、Webpack來實做整個網站的主體
並且透過Github Page可以直接以docs資料夾當作Web的特性
直接用Webpack將整個Web打包到一個docs資料夾中
只要push到Github就能立即發佈網站
上傳圖片
這部份其實不是真的上傳圖片
而是在前端透過js的FileReader來讀取檔案然後做預覽
取得base64的圖片URL然後顯示在Web上
上圖後的裁切、旋轉、縮放
這部份主要使用cropperjs這個js套件
很容易就能實做圖片的修改
另外還有使用自己開發的ciao-vue-dialog套件來放編輯圖片界面
圖片排序
這邊使用vuedraggable套件來實做排序功能
很簡單就能綁定資料的順序
匯出
匯出其實也不難
首先使用html2canvas將Web上拼好了Recatpcha區塊轉成canvas
在用downloadjs匯出canvas
自己做一個來玩看看吧
