用純前端的方式來實現圖片轉字符畫

最近花了幾天時間，作了一個圖片轉字符畫的工具，一開始想作成用服務器來生成圖像的形式，可是後來發現能夠不依賴服務器生成圖片，順便還能把項目託管到 Github Pages 上，所以就把項目作成了純前端的形式。

倉庫地址

演示地址

歡迎star，謝謝！

項目說明

• 純前端項目，不依賴服務器
• 支持 jpg，png，gif 三種格式圖片
• 使用 canvas 來實現單幀圖片的解析、縮放和生成，使用gif.js合併單幀圖片爲gif圖片
• 可等比縮放圖片
• 可自定義文字和背景顏色
• 可自定義轉換時使用的字符
• 部分方法實現參考已在源碼中標明出處

項目使用技術棧

• webpack
• React
• gif.js （生成gif圖片用）

項目結構

├─ src
│   ├─ component 組件文件
│   ├─ style 樣式文件
│   ├─ tools 圖片解析、轉化工具文件
│   ├─ App.jsx
│   ├─ index.js
│   └─ index.html
├─ static
│   └─ js
│       └─ gif.worker.js gif.js生成圖片依賴文件
├─ webpack
│    └─ webpack 配置文件
└ 其餘文件

效果演示

基本功能

圖片大小縮放

設置顏色（文字和背景）

自定義轉換字符

本地運行

開發模式

npm i
npm run dev

項目打包

npm run build

發佈到github pages

npm run deploy