快捷導(dǎo)航

通過javascript把圖片轉(zhuǎn)化為字符畫

更新時間：2013年10月24日 10:38:35 作者：

平時我們都是使用軟件把圖片轉(zhuǎn)化為字符畫，今天我就用JAVASCRIPT把圖片轉(zhuǎn)化成字符畫，在娛樂中學(xué)習(xí)一些JS、HTML5、canvas的使用方法。

1.獲取上傳圖片對象數(shù)據(jù)
Javascript無法直接獲取本地上傳的圖片的數(shù)據(jù)，html5可以解決這一問題。html5里面的FileReader interface可以把圖片對象的數(shù)據(jù)讀到內(nèi)存，然后通過接口的進(jìn)度事件（Progress Events）訪問這些數(shù)據(jù)。
瀏覽器支持：
1、Internet Explorer: 10+
2、Firefox: 10+
3、Chrome: 13+
4、Opera: 12+
5、Safari: partial

復(fù)制代碼代碼如下:

var reader = new FileReader();                        //建立一個FileReader接口  
reader.readAsDataURL(fileBtn.files[0]);        //fileBtn為文件上傳控件對象  
reader.onload = function () {                             //在onload事件中訪問圖像數(shù)據(jù)  
    img.src = reader.result;  }

2.獲取圖像對象像素點
圖像對象的getImageData 方法返回一個對象，每個像素點的 rgba 值都保存在其 data 屬性下面，這是一個一位數(shù)組，也就是說，rgba 分別對應(yīng)一個值，然后接著就是一下像素點的 rgba，假設(shè) getImageData.data 的值為 [1,2,3,4,5,6,7,8]，那么 getImageData 對象范圍就包含了 2 個像素點，第一個像素點的 rgba 值分別是 1,2,3,4，第二個像素點的就是 4,5,6,7,8。因此，我們在取每個像素點的 rgba 值的時候其index 應(yīng)該在像素點的索引值上乘以 4，然后通過 getGray() 計算灰度。

復(fù)制代碼代碼如下:

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.根據(jù)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)

復(fù)制代碼代碼如下:

// 根據(jù)rgb值計算灰度  
function getGray(r, g, b) {  
    return 0.299 * r + 0.578 * g + 0.114 * b;  
}  

4.根據(jù)灰度生成相應(yīng)字符
把不同的灰度替換成相應(yīng)的字符，原則上灰度越深的像素應(yīng)該用越復(fù)雜的字符，具體什么字符可以自由替換，這只是一個測試版本。
代碼片段：

復(fù)制代碼代碼如下:

// 根據(jù)灰度生成相應(yīng)字符  
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 ‘.';  
    }  
}  