通过javascript把图片转化为字符画
1.获取上传图片对象数据
Javascript无法直接获取本地上传的图片的数据,html5可以解决这一问题 。html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的进度事件(Progress Events)访问这些数据。
浏览器支持:
Internet Explorer: 10+
Firefox: 10+
Chrome: 13+
Opera: 12+
Safari: partial
代码片段:
var reader = new FileReader(); //建立一个FileReader接口
reader.readAsDataURL(fileBtn.files[0]); //fileBtn为文件上传控件对象
reader.onload = function () { //在onload事件中访问图像数据
img. reader.result; }
2.获取图像对象像素点
图像对象的getImageData
方法返回一个对象,每个像素点的 rgba
值都保存在其 data
属性下面,这是一个一位数组, 也就是说,rgba
分别对应一个值,然后接着就是一下像素点的 rgba
,假设 getImageData.data
的值为 [1,2,3,4,5,6,7,8]
, 那么 getImageData
对象范围就包含了 2 个像素点,第一个像素点的 rgba
值分别是 1,2,3,4
,第二个像素点的就是 4,5,6,7,8
。 因此,我们在取每个像素点的 rgba
值的时候其index
应该在像素点的索引值上乘以 4
,然后通过 getGray()
计算灰度。
var imgData = c.getImageData(0, 0, img.width, img.height);
var imgDataArr = imgData.data;
var imgDataWidth = imgData.width;
var imgDataHeight = imgData.height;
for (h = 0; h < imgDataHeight; h += 12) {
for (w = 0; w < imgDataWidth; w += 6) {
var index = (w + imgDataWidth * h) * 4;
var r = imgDataArr[index + 0];
var g = imgDataArr[index + 1];
var b = imgDataArr[index + 2];
}
}
3.根据rgb值计算灰度
不同的RGB空间,灰阶的计算公式有所不同,常见的几种RGB空间的计算灰阶的公式如下:
1、简化 sRGB IEC61966-2.1 [gamma=2.20]
Gray = (R^2.2 * 0.2126 + G^2.2 * 0.7152 + B^2.2 * 0.0722)^(1/2.2)
2、 Adobe RGB (1998) [gamma=2.20]
Gray = (R^2.2 * 0.2973 + G^2.2 * 0.6274 + B^2.2 * 0.0753)^(1/2.2)
3、Apple RGB [gamma=1.80]
Gray = (R^1.8 * 0.2446 + G^1.8 * 0.6720 + B^1.8 * 0.0833)^(1/1.8)
4、ColorMatch RGB [gamma=1.8]
Gray = (R^1.8 * 0.2750 + G^1.8 * 0.6581 + B^1.8 * 0.0670)^(1/1.8)
5、简化 KODAK DC Series Digital Camera [gamma=2.2]
Gray = (R^2.2 * 0.2229 + G^2.2 * 0.7175 + B^2.2 * 0.0595)^(1/2.2)
// 根据rgb值计算灰度
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b;
}
4.根据灰度生成相应字符
把不同的灰度替换成相应的字符,原则上灰度越深的像素应该用越复杂的字符,具体什么字符可以自由替换,这只是一个测试版本。
代码片段:
// 根据灰度生成相应字符
function toText(g) {
if (g <= 30) {
return ’8′;
} elseif (g > 30 && g <= 60) {
return ’&’;
} elseif (g > 60 && g <= 120) {
return ’$';
} elseif (g > 120 && g <= 150) {
return ’*';
} elseif (g > 150 && g <= 180) {
return ’o';
} elseif (g > 180 && g <= 210) {
return ’!';
} elseif (g > 210 && g <= 240) {
return ’;';
} else {
return‘.’;
}
}
到这次我们的工作就完成得差不多啦,上面只给出了一些代码的片段,把原理疏通了一下,具体怎么实现大家可以自由发挥,下面给出一个示例,把源码也贴出来跟大家分享。
查看示例
PS:已经把这个demo整合到我博客的小工具里了(通过模板实现)去看看?
下载地址
转载于:https://blog.51cto.com/sanyecao/1314224
通过javascript把图片转化为字符画相关推荐
- 教你用Python将图片转化为字符画!附源代码
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长 每天早上8点20分, 第一时间与你相约 每日英文 Whatever you are facing today, remem ...
- python将图片转为字符_Python将图片转化为字符画
简介 最近发现一个有趣的操作, 将一张图片转化为字符串的模式来显示! 如图 准备 首先需要安装一个CV模块用来导入图片的#pip install opencv-python 然后明确下程序的设计思路1 ...
- 将普通图片转化为字符画(Python)
1.设计思路 如何把以.png的图片以不同字符把它形象的画出来呢? 我们知道其实一张图片是由很多不同像素点所组成的,每种像素点可以表示一种颜色.那么如果我们用不同的字符来代替各种像素点,是不是就可以将 ...
- 图片转化为字符画——get!小技巧【美人图,动物照,有趣注释图案】
目录 一.想法来源 二.操作方法 1.魔性图注释代码样例 2.有趣的代码注释样例 3.巧用网站,上传图片呈现字符图 4.巧用代码注释工具 总结 前言 学习编程后,想用代码运行出图片上的形状.该怎么办? ...
- c语言将一幅画转换为字符画,C#将图片转换成字符画
先看一下效果图 在Main方法中调用(首先要添加程序集System.Drawing,然后引入命名空间System.Drawing) ConvertToChar(new Bitmap(@"D: ...
- python动态图片转字符画_python 图片在线转字符画预览
关于python图片转字符画,相信大家都不陌生,经常出现在 n个超有趣的python项目中. 今天我也来实践这个有趣的项目,更进一步的是把这个功能做成一个在线的网站,直接上传图片生成字符画,在线预览可 ...
- python将图片转化为字符图
最近看到将图片转化为字符图的小实验,我觉得很有趣,所以决定自己实现一下. 步骤和原理如下: 读取图片的灰度值矩阵(0-255之间),灰度值矩阵主要反映的是图片的黑白程度,越黑越接近与0,越白越接近于2 ...
- python动态图片转字符画_使用python实现一个将图片转换成字符画的功能
使用python实现一个将图片转换成字符画的功能 发布时间:2020-11-05 16:01:25 来源:亿速云 阅读:97 使用python实现一个将图片转换成字符画的功能?针对这个问题,这篇文章详 ...
- canvas全局合成画月牙_教你用Python将自己喜欢的图片转成字符画,居然还有动态的 - 松鼠爱吃饼干...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章一级Python技术 ,作者派森酱 前言 字符画是一种由字母,标点或其他字 ...
最新文章
- python3 eval安全替代函数ast.literal_eval
- 三种基本的存储引擎比较
- Oauth 2.0概述
- 全文搜索!收藏这篇Solr ElasticSearch 长文就可以搞定
- css跑道_如何不超出跑道:计划种子的简单方法
- 七阶拉丁方阵_【C语言】输出N阶拉丁方阵并统计个数
- mysql 利用触发器(Trigger)让代码更简单
- 或为红米8A 卢伟冰确认将推出5000mAh新机
- 接口测试(apipost、jmeter和python脚本)
- MySQL-5.6.14-winx64的免安装配置方法
- php phantomjs 安装_安装php-phantomjs
- Bus Hound 的使用方法
- 倒立摆:Simscape建模
- 处理符号(处理微信昵称特殊符号)
- 《计算机技术领域当前的主流技术及其社会需求调查报告》
- 自定义validation注解:解决动态多字段联动校验问题
- Ajax关于readyState和status
- 【前端大屏可视化项目适配方案】
- 零基础学习SpringBoot
- html5制作端午节游戏,意派Epub360怎么制作一个端午节H5小游戏页面?
热门文章
- mysql两列查询结果列拼接一个表输出_sql select语句,查询出两列结果拼接在一起...
- android+5系统,Android2.3.5系统+华为UI
- html5 文本框限制,html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度...
- k8s 通过环境变量获取Pod信息
- 4.Spring Security 添加图形验证码
- 名词解释_写字楼租赁相关名词解释
- php多关键词精确查找,搜索引擎,全文搜索_请问有没有搜索引擎能做到Like级别的任意关键词精确查询?,搜索引擎,全文搜索,lucene,elasticsearch,百度 - phpStudy...
- Windows下Git库的创建
- MySQL主键与索引的联系和区别
- python全局变量有缩进吗_Python全局变量和局部变量的问题 400 请求报错 -问答-阿里云开发者社区-阿里云...