Translating images into character drawings via JavaScript _javascript tips

Convert a picture into a character drawing through JavaScript

1. Get Upload Image Object data
JavaScript does not directly capture data from locally uploaded images, HTML5 can solve the problem. HTML5 inside the FileReader interface can read the image object's data into memory, and then access the data through the interface's progress events (Progress events).
Browser support:
1, Internet explorer:10+
2, firefox:10+
3, chrome:13+
4, opera:12+
5, Safari:partial

Copy Code code as follows:

var reader = new FileReader (); Establish a FileReader interface
Reader.readasdataurl (Filebtn.files[0]); FILEBTN upload a Control object for a file
Reader.onload = function () {//Access image data in onload event
IMG.SRC = Reader.result; }

2. Get pixel points of image objects
The Getimagedata method of an Image object returns an object, and the Rgba value of each pixel is saved under its Data property, which is an array, that is, the RGBA corresponds to a value, and then the rgba of the pixel, assuming The value of Getimagedata.data is [1,2,3,4,5,6,7,8], then the Getimagedata object range contains 2 pixels, the RGBA value of the first pixel is 1,2,3,4, and 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, then the gray level is computed by Getgray ().

Copy Code code as follows:

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 gray level according to the RGB value
Different RGB space, the calculation formula of gray scale is different, common several kinds of RGB space calculate the formula of gray scale is as follows:
1. Simplify 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. 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)

Copy Code code as follows:

Calculate grayscale based on RGB values
function Getgray (R, G, b) {
Return 0.299 * r + 0.578 * g + 0.114 * b;
}

4. Generate corresponding characters according to grayscale
To replace different shades of gray to the corresponding characters, in principle, the darker the pixels should be used more complex characters, specific characters can be replaced freely, this is only a test version.
Code fragment:

Copy Code code as follows:

Generate corresponding characters from grayscale
function Totext (g) {
if (g <= 30) {
Return ' 8′;
else if (g > && g <= 60) {
Return ' & ';
else if (g > && g <= 120) {
Return ' $ ';
else if (g > F && G <= 150) {
Return ' * ';
else if (g > F && G <= 180) {
Return ' O ';
else if (g > 180 && G <= 210) {
Return '! ';
else if (g > 210 && G <= 240) {
return '; ';
} else {
Return '. ';
}
}

To this time our work is almost finished, the above only gives some snippets of code, the principle of dredging up a bit, how to realize that everyone can freely play. Click here. Code Download Address