透過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)
複製程式碼
程式碼如下:
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 '.';
}
}
到這次我們的工作就完成得差不多了，具體怎麼實現大家可以自由發揮。
猛點這裡程式碼下載位址
