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

通过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]