用純前端的體式格局來完成圖片轉字符畫

近來花了幾天時候，做了一個圖片轉字符畫的東西，一開始想做成用服務器來天生圖象的情勢，然則厥後發明能夠不依靠服務器天生圖片，趁便還能把項目託管到 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