通过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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
简单的渐变轮播插件
Jan 12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
js实现右键弹出自定义菜单
Sep 08 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
牡丹941资料
2021/03/01 无线电
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php单一接口的实现方法
2015/06/20 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python中协程用法代码详解
2018/02/10 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
初任培训自我鉴定
2013/10/07 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
工作总结与自我评价
2014/09/18 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers