透過javascript把圖片轉換成字元畫_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介面
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,mg img .width, img.height); 
var imgDataArr = imgData.data; 
var imgDataWidth = imgData.width; 
var imgDataHeight = imgData.height. ; h = 12) { 
    for (w = 0; w         var index = (w imgDataWidth * h) * 4; ; 
        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, 20150505050505535535353533000000)。

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]4、ColorMatch RGB [gamma=1.8]
Gray = (R^1.8 0. 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 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 && g         return '&'; 
    } else if (g > 60 && g 120 && g         return '*'; 
    } else if (g > 150 && g    } else if (g > 180 && g         return '!'; 
    } else if (g > 210 && g    }  else { 
        return '.'; 
    } 
} 


到這次我們的工作就完成得差不多了，具體怎麼實現大家可以自由發揮。
猛點這裡程式碼下載位址