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

NikoManiac 發布于2019-08-22 17:25 / 2809人閱讀

摘要：最近花了幾天時間，做了一個圖片轉字符畫的工具，一開始想做成用服務器來生成圖像的形式，但是后來發現可以不依賴服務器生成圖片，順便還能把項目托管到上，因此就把項目做成了純前端的形式。

最近花了幾天時間，做了一個圖片轉字符畫的工具，一開始想做成用服務器來生成圖像的形式，但是后來發現可以不依賴服務器生成圖片，順便還能把項目托管到 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

GPU云服務器云服務器 php圖片轉字符程序 api的方式來管理云服務器互聯網專線的接入實現方式轉java與前端的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95156.html

運用Python實現圖片轉字符畫

　　本文關鍵闡述了運用Python實現圖片轉字符畫，要把圖片轉字符畫，必須要先界定1個字段名，用于和灰度級做投射，將照片每一個象素的RGB值轉化成1個灰度級，把它相對應的標識符導出就得到了字符畫　　序言　　相信大家在網上常?？吹接行┤苏宫F出各種各樣字符畫，對于這些色彩斑斕的全球而言，我們平時看到的就是某些超清的彩色圖片，有時候再來一個粗糙黑白字符畫，還是比較緩解疲勞的。喜愛不要忘記個人收藏、關心、...

89542767 2023-01-02 21:56 評論0 收藏0
用純css來實現一個優惠券

摘要：關于徑向漸變的具體使用可以參考張鑫旭的文章徑向漸變語法及輔助理解案例則那么怎樣實現我們要的效果呢我們先看看徑向漸變的語法徑向漸變由它的中心定義。查看原文可以有更好的排版效果哦前言我們在平時的網頁中，經常會見到這樣的優惠券或者其他的券（特征就是會有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 評論0 收藏0
python 圖片在線轉字符畫預覽

摘要：文章鏈接關于圖片轉字符畫，相信大家都不陌生，經常出現在個超有趣的項目中。今天我也來實踐這個有趣的項目，更進一步的是把這個功能做成一個在線的網站，直接上傳圖片生成字符畫，在線預覽可以讓更多的人來體驗。至此，生成字符畫的腳本完成了。文章鏈接：https://mp.weixin.qq.com/s/yiFOmljhyalE8ssAgwo6Jw 關于python圖片轉字符畫，相信大家都不陌生...

CarterLi 2019-07-31 11:13 評論0 收藏0
簡單幾步用純CSS3實現3D翻轉效果

摘要：作為前端開發人員的必修課，翻轉能帶我們完成許多基本動效，本期我們將用實現翻轉效果第一步非常簡單，我們簡單畫個演示方塊，為其添加和屬性本示例均使用語法我們看一看這時候的效果這里需要注意的是屬性要寫在上而不是上，如果只在上寫，則鼠標移出時并沒有作為前端開發人員的必修課，CSS3翻轉能帶我們完成許多基本動效，本期我們將用CSS3實現hover翻轉效果~ 第一步非常簡單，我們簡單畫1個演示方塊，為其...

zhoutk 2019-04-23 11:43 評論0 收藏0