OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   发布 ourjs  1382577258000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

摘自 流浪老三 的Blog

1.获取上传图片对象数据

javascript turn image to chars 

 

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.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值计算灰度  
// 根据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 ‘.’;
}
}

到这次我们的工作就完成得差不多啦,上面只给出了一些代码的片段,把原理疏通了一下,具体怎么实现大家可以自由发挥,下面给出一个示例,把源码也贴出来跟大家分享。

查看示例

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 为何程序员完成最后20%的工作需要的时间跟之前的80%一样多?
  2. 通过javascript把图片转化为字符画
  3. 一个女软件工程师的征婚PPT
  4. 够用即可:简单之美(Worse Is Better)
  5. 女子发帖赞扬IT男老公 网友纷纷求介绍
  6. 马化腾写代码的水平如何?
  7. 程序员必看的十大电影
  8. 对于现代开发来说,JavaScript就是一种垃圾语言
  9. 做个犀利的码农:如何持续培养/更新自己的开发技能
  10. 性能测评:Node.JS比Java EE快20%
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 理解JavaScript中的Event Loop
  2. 通过javascript把图片转化为字符画
  3. [译] JavaScript 开发者经常忽略或误用的七个基础知识点

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号