通过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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
javascript arguments使用示例
Dec 16 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
浅析vue component 组件使用
Mar 06 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
Vue Components 数字键盘的实现
Sep 18 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打开和关闭文件操作函数总结
2014/11/18 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
NumPy排序的实现
2020/01/21 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
文明餐桌活动方案
2014/02/11 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
出纳担保书范文
2014/04/02 职场文书
探亲假请假条
2014/04/11 职场文书
学前教育专业求职信
2014/09/02 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis