Convert images into character drawings using javascript

Convert images into character drawings using javascript

2. Get the pixel of the image object
The getImageData method of the image object returns an object, the rgba value of each pixel is stored under its data attribute, which is a one-bit array, that is, rgba corresponds to a value, and then the following pixel's rgba, assuming that the value of getimagedata.data is [1,2,3,4,5,6,7,8], then the getImageData object scope contains two pixels, The rgba value for the first pixel is 1,2,3,4, and the rgba value for the second pixel is 4,5,6,7,8. Therefore, when we take the rgba value of each pixel, its index should be multiplied by 4 on the index value of the pixel, and then the grayscale should be calculated by 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. Calculate the grayscale according to the RGB value
For different RGB Spaces, the calculation formula of grey scale is different. The common formula for calculating grey scale of several RGB Spaces is as follows:
1. Simplify sRGB iec 61966-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. Simplify 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)

//Calculate the gray scale & PI according to RGB value;
function getGray(r, g, b) {  
    return 0.299 * r + 0.578 * g + 0.114 * b;  
}  

4. Generate corresponding characters according to the grayscale
Replace different grayscale with corresponding characters. In principle, the deeper the grayscale, the more complex the pixel should be, and the specific characters can be freely replaced. This is just a test version.
Code snippet:

//Generate the corresponding character & PI according to the grayscale;
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  ' .';  
    }  
}  

By this time our work is almost done, the above only gave some code fragments, the principle of the dredge, how to achieve you can freely play. (link: http://xiazai.jb51.net/201310/yuanma/img2txt.rar)