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

更新时间：2013年10月24日 10:38:35 作者：

平时我们都是使用软件把图片转化为字符画，今天我就用JAVASCRIPT把图片转化成字符画，在娱乐中学习一些JS、HTML5、canvas的使用方法。

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 ‘.';  
    }  
}  

到这次我们的工作就完成得差不多啦,上面只给出了一些代码的片段，把原理疏通了一下，具体怎么实现大家可以自由发挥。猛点这里代码下载地址

您可能感兴趣的文章:

canvas快速绘制圆形、三角形、矩形、多边形方法介绍
本文主要介绍了使用canvas来绘制常见的各种图形实例，并且会简单封装一下绘制各图形的方法，最后会分享给大家一个封装好的快速绘制多边形的方法。下面跟着小编一起来看下吧
2016-12-12
JavaScript XML实现两级级联下拉列表
用xml作为存储容器，不用数据库，速度和效率高些。
2008-11-11
JS前端加密算法示例
这篇文章主要介绍了JS前端加密算法,结合实例形式分析了crypto-js具体用法与注意事项,需要的朋友可以参考下
2016-12-12
JS返回页面时自动回滚到历史浏览位置
这篇文章主要介绍了JS返回页面时自动回滚到历史浏览位置的相关知识,本文给大家使用的是SessionStorage来存储页面内容，在返回页面时重新加载，具体实现代码大家跟随小编一起看看吧
2018-09-09
用JS生成UUID的方法实例
下面小编就为大家带来一篇用JS生成UUID的方法实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-03-03
JS图片等比例缩放方法完整示例
这篇文章主要介绍了JS图片等比例缩放方法,结合完整实例形式分析了javascript针对页面图片元素属性操作的相关技巧,需要的朋友可以参考下
2016-08-08
js继承的实现代码
学着js的继承，自己也写了个。感觉不是很好。现在很多代码都封装成类。
2010-08-08
浅谈JavaScript 数据属性和访问器属性
下面小编就为大家带来一篇浅谈JavaScript 数据属性和访问器属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
纯js实现页面返回顶部的动画(超简单)
下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
深入理解JavaScript系列(2) 揭秘命名函数表达式
网上还没用发现有人对命名函数表达式进去重复深入的讨论，正因为如此，网上出现了各种各样的误解，本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点
2012-01-01