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

 

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

 

 

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

 

Javascript无法直接获取本地上传的图片的数据,html5可以解决这一问题 。html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的进度事件(Progress Events)访问这些数据。

浏览器支持:

    • Internet Explorer: 10+
    • Firefox: 10+
    • Chrome: 13+
    • Opera: 12+
    • Safari: partial

代码片段:

  1. var reader = new FileReader();                        //建立一个FileReader接口  
  2. reader.readAsDataURL(fileBtn.files[0]);        //fileBtn为文件上传控件对象  
  3. reader.onload = function () {                             //在onload事件中访问图像数据  
  4.     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() 计算灰度。

  1. var imgData = c.getImageData(0, 0, img.width, img.height);  
  2. var imgDataArr = imgData.data;  
  3. var imgDataWidth = imgData.width;  
  4. var imgDataHeight = imgData.height;  
  5. for (h = 0; h < imgDataHeight; h += 12) {  
  6.     for (w = 0; w < imgDataWidth; w += 6) {  
  7.         var index = (w + imgDataWidth * h) * 4;  
  8.         var r = imgDataArr[index + 0];  
  9.         var g = imgDataArr[index + 1];  
  10.         var b = imgDataArr[index + 2];  
  11.     }  
  12. }  

 

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)
 
 
  1. // 根据rgb值计算灰度  
  2. function getGray(r, g, b) {  
  3.     return 0.299 * r + 0.578 * g + 0.114 * b;  
  4. }  

 

4.根据灰度生成相应字符

 

把不同的灰度替换成相应的字符,原则上灰度越深的像素应该用越复杂的字符,具体什么字符可以自由替换,这只是一个测试版本。
代码片段:

  1. // 根据灰度生成相应字符  
  2. function toText(g) {  
  3.     if (g <= 30) {  
  4.         return ’8′;  
  5.     } else if (g > 30 && g <= 60) {  
  6.         return ’&’;  
  7.     } else if (g > 60 && g <= 120) {  
  8.         return ’$';  
  9.     }  else if (g > 120 && g <= 150) {  
  10.         return ’*';  
  11.     } else if (g > 150 && g <= 180) {  
  12.         return ’o';  
  13.     } else if (g > 180 && g <= 210) {  
  14.         return ’!';  
  15.     } else if (g > 210 && g <= 240) {  
  16.         return ’;';  
  17.     }  else {  
  18.         return ‘.’;  
  19.     }  
  20. }  

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

查看示例

PS:已经把这个demo整合到我博客的小工具里了(通过模板实现)去看看?

下载地址

posted @ 2013-10-24 08:34  流浪老三  阅读(2496)  评论(5编辑  收藏  举报
Edit by  三叶草