开源自己写的图片转Ascii码图工具
GitHub地址:https://github.com/qiangzi7723/img2Ascii
如果觉得不错可以给个star或者提出你的建议
img2Ascii,基于JS的图片转ASCII示意图。
效果
转码前图片
转码后图片
构建
npm install 或者 yarn install
之后通过
npm run dev
即可打开项目
使用
以下代码在main.js
中
const Img2Ascii=require('./index');
const img=require('./assets/av.png');
new Img2Ascii(img,(nSrc,img)=>{
const nImg = new Image();
nImg.src = nSrc;
nImg.style.width = img.width + 'px';
nImg.style.height = img.height + 'px';
nImg.onload = () => {
document.body.appendChild(nImg);
document.getElementById('tip').style.display='none';
}
});
Img2Ascii方法需要传入两个参数,第一个参数是图片路径,第二个参数是图片转换完毕后的回调函数,需要自己在回调函数中注入新生成的图片节点,否则看不到效果。
实现思路
把图片在canvas
中绘制后,利用getImageData
接口获取图片的rgba
,计算rgba
值转换为对应的ASCII
码,在适当的位置进行换行,然后整体转换便完成。
瓶颈
目前项目的瓶颈存在于html2canvas
这个插件,把图片转成ASCII码在浏览器中输出是十分快速的,但是后期将输出的ASCII码转换成图片时,使用了html2canvas
插件,这个插件在转换图片的过程中十分缓慢,导致最后的输出缓慢。接下来会把html2canvas
这个插件换成使用别的插件实现,忘广大网友提供一些转图片的插件。
除此之外我还写有draggable
拖拽库以及ant-template
模板引擎,如果觉得不错可以给个star
。
开源自己写的图片转Ascii码图工具的更多相关文章
- 手把手教你图片转ASCII码图
效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii码,完成 实现 第一步:获 ...
- ASCII码图
图片转ASCII码图 效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii ...
- 普通图片转ascii码字符图
效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii码,完成 实现 第一步:获 ...
- 自己写unicode转换ascii码,wchar*到char*
对于ascii码的char事实上就是unicode码wchar的首个字节码, 如wchar[20] = "qqqq"; 在内存中排码事实上是char的'q' '\0'这类.因此我们 ...
- Monodraw for Mac(基于 ASCII 码设计编辑工具)破解版安装
1.软件简介 Monodrawp 是 macOS 系统上一款专为 Mac 设计的强大的 ASCII 码设计编辑器,纯文本历经几十年而不衰.Monodraw for mac 可以创建基于文本的艺术 ...
- 字符集详解 ASCII码、Unicode、UTF-8 (转)
认识字符集 对于计算机而言,它仅认识两个0和1,不管是在内存中还是外部存储设备上,我们所看到的文字.图片.视频等等“数据”在计算机中都是已二进制形式存在的.不同字符对应二进制数的规则,就是字符的编码. ...
- ASCII码、Unicode码 转中文
ASCII码.Unicode码 转中文 在最近工作中遇到了一些汉字编码转换的处理,可以通过正则表达式及转换字符来实现转成中文 Unicode转换示例 通常为10位编码, 通过digit参数传入 pri ...
- C语言中两位ASCII码可以表示汉字
最近偶然有人问到这个相关字符编码的问题,所以百度了下参考了这两个资料,进行了简单分析. ******************************************************** ...
- js中ascii码的转换
今天在把原来用C写的程序移植到javascript上,但是有个地方一直调不通,后来才发现是js奇葩的字符处理出的问题.c中使用的字符处理比如加上一个字符值强制转换一下,在js中就行不通了. 但是js提 ...
随机推荐
- Maven学习(三)
maven相关概念 maven坐标 Maven世界拥有大量构建,当我们需要引用依赖包是,需要用一个用来唯一标识去确定唯一的一个构建.如果拥有了统一规范,就可以把查找工作交给机器. 类似于空间找点的坐标 ...
- 底层算法系列:Paxos算法
关于算法,面太广.本系列只研究实际应用中遇到的核心算法.了解这些算法和应用,对java码农进阶是很有必要的. 对于Paxos学习论证过程中,证实一句话:有史以来学习paxos最好的地方wiki:Pax ...
- 【转】HTTP长连接与短连接(2)
一.什么是长连接 HTTP1.1规定了默认保持长连接(HTTP persistent connection ,也有翻译为持久连接),数据传输完成了保持TCP连接不断开(不发RST包.不四次握手),等待 ...
- 移动端页面以rem为单位设置字体大小不生效解决方法
这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...
- 搭建eureka服务
1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...
- [C++][OpenGL]自己写GUI(0)——介绍
文章可转载,转载请注明出处:http://www.cnblogs.com/collectionne/p/6928612.html.文章未完,如果不在博客园(cnblogs)发现本文,请访问前面的链接查 ...
- iOS CAReplicatorLayer 实现脉冲动画效果
iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...
- 并发容器ConcurrentHashMap#put方法解析
jdk1.7.0_79 HashMap可以说是每个Java程序员用的最多的数据结构之一了,无处不见它的身影.关于HashMap,通常也能说出它不是线程安全的.这篇文章要提到的是在多线程并发环境下的Ha ...
- Hadoop的编译
Hadoop2.4.0 重新编译 64 位本地库 原创作者:大鹏鸟 时间:2014-07-28 环境:虚拟机 VirtualBox,操作系统 64 位 CentOS 6.4 下载重新编译需要的软件 ...
- VR全景,让VR不再是“空中楼阁“——智慧城市常诚
VR的风口来了又走,而VR技术的支持者却始终在探索VR在各个领域的应用.最近,有业内专家表示,VR给带来的真正好处是,容易让人产生同理心,但同理心究竟能帮助我们做什么呢? 我第一次见到挪威建筑师Haa ...