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码图工具的更多相关文章

  1. 手把手教你图片转ASCII码图

    效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii码,完成 实现 第一步:获 ...

  2. ASCII码图

    图片转ASCII码图   效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii ...

  3. 普通图片转ascii码字符图

    效果图 基本思路 把图片每个像素点的信息拿出来,最重要的是拿到rgb的值 把每个像素点由rgb转成灰度图像,即0-255 给0-255分级,把每个等级的像素点转换成ascii码,完成 实现 第一步:获 ...

  4. 自己写unicode转换ascii码,wchar*到char*

    对于ascii码的char事实上就是unicode码wchar的首个字节码, 如wchar[20] = "qqqq"; 在内存中排码事实上是char的'q' '\0'这类.因此我们 ...

  5. Monodraw for Mac(基于 ASCII 码设计编辑工具)破解版安装

    1.软件简介    Monodrawp 是 macOS 系统上一款专为 Mac 设计的强大的 ASCII 码设计编辑器,纯文本历经几十年而不衰.Monodraw for mac 可以创建基于文本的艺术 ...

  6. 字符集详解 ASCII码、Unicode、UTF-8 (转)

    认识字符集 对于计算机而言,它仅认识两个0和1,不管是在内存中还是外部存储设备上,我们所看到的文字.图片.视频等等“数据”在计算机中都是已二进制形式存在的.不同字符对应二进制数的规则,就是字符的编码. ...

  7. ASCII码、Unicode码 转中文

    ASCII码.Unicode码 转中文 在最近工作中遇到了一些汉字编码转换的处理,可以通过正则表达式及转换字符来实现转成中文 Unicode转换示例 通常为10位编码, 通过digit参数传入 pri ...

  8. C语言中两位ASCII码可以表示汉字

    最近偶然有人问到这个相关字符编码的问题,所以百度了下参考了这两个资料,进行了简单分析. ******************************************************** ...

  9. js中ascii码的转换

    今天在把原来用C写的程序移植到javascript上,但是有个地方一直调不通,后来才发现是js奇葩的字符处理出的问题.c中使用的字符处理比如加上一个字符值强制转换一下,在js中就行不通了. 但是js提 ...

随机推荐

  1. 小议 - 来自《XX时代XX公司》的笔试编程题目

    经过几天的雾霾,魔都终于放晴了.哥投了几天的简历,希望找到一份.NET开发方面的岗位.也收到了几个面试邀请.这不应Ge老师的要求,选了个良辰吉日,带着身份证,学位证怀揣着2B青年的梦想来这个XX公司面 ...

  2. $.when()方法翻译

    地址:http://api.jquery.com/jQuery.when/ jQuery.when( deferreds ),returns Promise 正文 Description: Provi ...

  3. Linux常用网络测试命令

    Linux常用网络测试命令 1. ifconfig     可以使用ifconfig命令来配置并查看网络接口的配置情况.    例如: (1) 配置eth0的IP地址, 同时激活该设备. #ifcon ...

  4. 《HelloGitHub》第 14 期

    公告 欢迎通过在 GitHub 上新建 issues 方式推荐项目,我真心希望读者可以在 HelloGItHub,找到真正的编程乐趣! <HelloGitHub>第 14 期 兴趣是最好的 ...

  5. vuex所有核心概念完整解析State Getters Mutations Actions

    vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...

  6. Wampserver红色橙色解决思路----端口冲突是关键

    Wampserver不是绿色:wampserver下载安装不需要配置环境,在这之前需要下载tomcat,并确保启动,不然会是红色.安装好wampserver(就是在安装过程不会弹出缺少什么文件,我的就 ...

  7. 【JAVAEE学习笔记】hibernate01:简介、搭建、配置文件详解、API详解和CRM练习:保存客户

    今日学习:hibernate是什么 一.hibernate是什么 框架是什么: 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架 ...

  8. C#简单构架之EF进行读写分离+多数据库(Mysql/SqlService)

    最近因为项目需要,研究了下EF的读写分离,所以做了一个demo进行测试,下面是项目的结构 表现层view 主要提供Web.WebApi等表现层的解决方案 公共层public 主要提供项目公共类库,数据 ...

  9. 初步探究java中程序退出、GC垃圾回收时,socket tcp连接的行为

    初步探究java中程序退出.GC垃圾回收时,socket tcp连接的行为 今天在项目开发中需要用到socket tcp连接相关(作为tcp客户端),在思考中发觉需要理清socket主动.被动关闭时发 ...

  10. R语言包翻译

    Shiny-cheatsheet 作者:周彦通 1.安装 install.packages("shinydashboard")  2.基础知识 仪表盘有三个部分:标题.侧边栏,身体 ...