通过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代码
Sep 04 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Javascript的比较汇总
Jul 25 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue中路由跳转不计入history的操作
Sep 21 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
自考自我鉴定范文
2013/10/30 职场文书
社区工作者感言
2014/03/02 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js