Are U a robot ?

 

開發動機

常常在網路上看到類似這種很有趣的自製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

 

自己做一個來玩看看吧