亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

NikoManiac / 2861人閱讀

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

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

倉庫地址

演示地址

歡迎star，謝謝！

項(xiàng)目說明

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

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

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

可等比縮放圖片

可自定義文字和背景顏色

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

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

項(xiàng)目使用技術(shù)棧

webpack

React

gif.js （生成gif圖片用）

項(xiàng)目結(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)換字符

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95156.html

相關(guān)文章

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

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

    89542767 評(píng)論0 收藏0

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

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

    awkj 評(píng)論0 收藏0

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

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

    CarterLi 評(píng)論0 收藏0

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

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

    zhoutk 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<