用纯前端的方式来实现图片转字符画

NikoManiac 发布于2019-08-22 17:25 / 2661人阅读

摘要：最近花了几天时间，做了一个图片转字符画的工具，一开始想做成用服务器来生成图像的形式，但是后来发现可以不依赖服务器生成图片，顺便还能把项目托管到上，因此就把项目做成了纯前端的形式。

最近花了几天时间，做了一个图片转字符画的工具，一开始想做成用服务器来生成图像的形式，但是后来发现可以不依赖服务器生成图片，顺便还能把项目托管到 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

云服务器混合云 php图片转字符程序 api的方式来管理云服务器互联网专线的接入实现方式转java与前端的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95156.html

用纯前端的方式来实现图片转字符画

摘要：最近花了几天时间，做了一个图片转字符画的工具，一开始想做成用服务器来生成图像的形式，但是后来发现可以不依赖服务器生成图片，顺便还能把项目托管到上，因此就把项目做成了纯前端的形式。最近花了几天时间，做了一个图片转字符画的工具，一开始想做成用服务器来生成图像的形式，但是后来发现可以不依赖服务器生成图片，顺便还能把项目托管到 Github Pages 上，因此就把项目做成了纯前端的形式。 ...

huashiou 2019-08-05 13:55 评论0 收藏0
运用Python实现图片转字符画

　　本文关键阐述了运用Python实现图片转字符画，要把图片转字符画，必须要先界定1个字段名，用于和灰度级做投射，将照片每一个象素的RGB值转化成1个灰度级，把它相对应的标识符导出就得到了字符画　　序言　　相信大家在网上常常看到有些人展现出各种各样字符画，对于这些色彩斑斓的全球而言，我们平时看到的就是某些超清的彩色图片，有时候再来一个粗糙黑白字符画，还是比较缓解疲劳的。喜爱不要忘记个人收藏、关心、...

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