通过javascript把图片转化为字符画


Posted in Javascript onOctober 24, 2013

通过javascript把图片转化为字符画

1.获取上传图片对象数据
Javascript无法直接获取本地上传的图片的数据,html5可以解决这一问题 。html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的进度事件(Progress Events)访问这些数据。
浏览器支持:
1、Internet Explorer: 10+
2、Firefox: 10+
3、Chrome: 13+
4、Opera: 12+
5、Safari: partial

var reader = new FileReader();                        //建立一个FileReader接口  
reader.readAsDataURL(fileBtn.files[0]);        //fileBtn为文件上传控件对象  
reader.onload = function () {                             //在onload事件中访问图像数据  
    img.src = 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′;  
    } else if (g > 30 && g <= 60) {  
        return '&';  
    } else if (g > 60 && g <= 120) {  
        return '$';  
    }  else if (g > 120 && g <= 150) {  
        return '*';  
    } else if (g > 150 && g <= 180) {  
        return 'o';  
    } else if (g > 180 && g <= 210) {  
        return '!';  
    } else if (g > 210 && g <= 240) {  
        return ';';  
    }  else {  
        return ‘.';  
    }  
} 

到这次我们的工作就完成得差不多啦,上面只给出了一些代码的片段,把原理疏通了一下,具体怎么实现大家可以自由发挥。猛点这里代码下载地址
Javascript 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
jquery实现手风琴效果
Nov 20 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
javaScript封装的各种写法
Aug 14 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 #Javascript
原生JS实现加入收藏夹的代码
Oct 24 #Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 #Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 #Javascript
js switch case default 的用法示例介绍
Oct 23 #Javascript
js setTimeout opener的用法示例详解
Oct 23 #Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 #Javascript
You might like
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP类型约束用法示例
2016/09/28 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
python多重继承实例
2014/10/11 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python中max函数用法实例分析
2015/07/17 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Python调用飞书发送消息的示例
2020/11/10 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
医院搬迁方案
2014/06/14 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL