开源自己写的图片转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提 ...
随机推荐
- 小议 - 来自《XX时代XX公司》的笔试编程题目
经过几天的雾霾,魔都终于放晴了.哥投了几天的简历,希望找到一份.NET开发方面的岗位.也收到了几个面试邀请.这不应Ge老师的要求,选了个良辰吉日,带着身份证,学位证怀揣着2B青年的梦想来这个XX公司面 ...
- $.when()方法翻译
地址:http://api.jquery.com/jQuery.when/ jQuery.when( deferreds ),returns Promise 正文 Description: Provi ...
- Linux常用网络测试命令
Linux常用网络测试命令 1. ifconfig 可以使用ifconfig命令来配置并查看网络接口的配置情况. 例如: (1) 配置eth0的IP地址, 同时激活该设备. #ifcon ...
- 《HelloGitHub》第 14 期
公告 欢迎通过在 GitHub 上新建 issues 方式推荐项目,我真心希望读者可以在 HelloGItHub,找到真正的编程乐趣! <HelloGitHub>第 14 期 兴趣是最好的 ...
- vuex所有核心概念完整解析State Getters Mutations Actions
vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...
- Wampserver红色橙色解决思路----端口冲突是关键
Wampserver不是绿色:wampserver下载安装不需要配置环境,在这之前需要下载tomcat,并确保启动,不然会是红色.安装好wampserver(就是在安装过程不会弹出缺少什么文件,我的就 ...
- 【JAVAEE学习笔记】hibernate01:简介、搭建、配置文件详解、API详解和CRM练习:保存客户
今日学习:hibernate是什么 一.hibernate是什么 框架是什么: 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架 ...
- C#简单构架之EF进行读写分离+多数据库(Mysql/SqlService)
最近因为项目需要,研究了下EF的读写分离,所以做了一个demo进行测试,下面是项目的结构 表现层view 主要提供Web.WebApi等表现层的解决方案 公共层public 主要提供项目公共类库,数据 ...
- 初步探究java中程序退出、GC垃圾回收时,socket tcp连接的行为
初步探究java中程序退出.GC垃圾回收时,socket tcp连接的行为 今天在项目开发中需要用到socket tcp连接相关(作为tcp客户端),在思考中发觉需要理清socket主动.被动关闭时发 ...
- R语言包翻译
Shiny-cheatsheet 作者:周彦通 1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体 ...