Are U a robot ?

專案連結：https://ciao-chung.github.io/are-you-a-robot/

\n

開發時間：2018年7月

\n

\n

 

\n

開發動機

\n

常常在網路上看到類似這種很有趣的自製Recaptcha

\n

像是找出胡瓜跟阿信

\n

或是找出宋少卿、屈中恆、鈕承澤

\n

不過如果要自己透過PhotoShop來做又太麻煩

\n

所以我才想說自己做一個Web版的產生器來給大家玩

\n

 

\n

Demo影片

\n\n

 

\n

功能

\n

其實功能也不難

\n

就大概這幾項

\n

\n
• 可以自己設定標題
\n
• 可以自己上圖並且做修改(裁切、旋轉、縮放)
\n
• 圖片可排序
\n
• 可以修改圖片數量
\n
• 可以匯出圖片
\n
• I18n
\n

\n

 

\n

技術說明

\n

 

\n

網站主體

\n

使用Vue、Webpack來實做整個網站的主體

\n

並且透過Github Page可以直接以docs資料夾當作Web的特性

\n

直接用Webpack將整個Web打包到一個docs資料夾中

\n

只要push到Github就能立即發佈網站

\n

 

\n

上傳圖片

\n

這部份其實不是真的上傳圖片

\n

而是在前端透過js的FileReader來讀取檔案然後做預覽

\n

取得base64的圖片URL然後顯示在Web上

\n

 

\n

上圖後的裁切、旋轉、縮放

\n

\n

這部份主要使用cropperjs這個js套件

\n

很容易就能實做圖片的修改

\n

另外還有使用自己開發的ciao-vue-dialog套件來放編輯圖片界面

\n

 

\n

圖片排序

\n

這邊使用vuedraggable套件來實做排序功能

\n

很簡單就能綁定資料的順序

\n

 

\n

匯出

\n

匯出其實也不難

\n

首先使用html2canvas將Web上拼好了Recatpcha區塊轉成canvas

\n

在用downloadjs匯出canvas

\n

 

\n

自己做一個來玩看看吧

\n

\n