成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用純前端的方式來實現(xiàn)圖片轉(zhuǎn)字符畫

NikoManiac / 2817人閱讀

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

最近花了幾天時間，做了一個圖片轉(zhuǎn)字符畫的工具，一開始想做成用服務(wù)器來生成圖像的形式，但是后來發(fā)現(xiàn)可以不依賴服務(wù)器生成圖片，順便還能把項目托管到 Github Pages 上，因此就把項目做成了純前端的形式。

倉庫地址

演示地址

歡迎star，謝謝！

項目說明

純前端項目，不依賴服務(wù)器

支持 jpg，png，gif 三種格式圖片

使用 canvas 來實現(xiàn)單幀圖片的解析、縮放和生成，使用gif.js合并單幀圖片為gif圖片

可等比縮放圖片

可自定義文字和背景顏色

可自定義轉(zhuǎn)換時使用的字符

部分方法實現(xiàn)參考已在源碼中標明出處

項目使用技術(shù)棧

webpack

React

gif.js （生成gif圖片用）

項目結(jié)構(gòu) 
├─ src
│   ├─ component 組件文件
│   ├─ style 樣式文件
│   ├─ tools 圖片解析、轉(zhuǎn)化工具文件
│   ├─ App.jsx
│   ├─ index.js
│   └─ index.html
├─ static
│   └─ js
│       └─ gif.worker.js gif.js生成圖片依賴文件
├─ webpack
│    └─ webpack 配置文件
└ 其他文件
效果演示 基本功能

圖片大小縮放

設(shè)置顏色（文字和背景）

自定義轉(zhuǎn)換字符

本地運行 開發(fā)模式 
npm i
npm run dev
項目打包 
npm run build
發(fā)布到github pages 
npm run deploy

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95156.html

相關(guān)文章

  • 運用Python實現(xiàn)圖片轉(zhuǎn)字符畫

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

    89542767 評論0 收藏0

  • 用純css來實現(xiàn)一個優(yōu)惠券

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

    awkj 評論0 收藏0

  • python 圖片在線轉(zhuǎn)字符畫預覽

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

    CarterLi 評論0 收藏0

  • 簡單幾步用純CSS3實現(xiàn)3D翻轉(zhuǎn)效果

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

    zhoutk 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<