One of my first major coding projects was a program that would cature the screen and store the color of all pixels in a txt file, slowly. Next I made a program that could reconstruct the image in Microsoft Paint, again, very slowly. Both programs were so slow that a full desktop would take days, if not weeks to complete.
Over time, I have made a number of changes to the programs, some necessitating entire rewrites of the programs.
Now I can convert a full image file to a text file and back, to multiple formats, directly without any external programs.
I wanted one of these formats to be an HTML document that could be put on a website rather than a .bmp which I already had working. Initially, I tried assigning the colors to 1x1 <div> elements. However, those were too cumbersome for any browser, though Firefox seemed to handle it the best rendering a few rows of a 1920x1080 test image. After this resounding failure, I switch to using a <canvas> element with inline JavaScript to set each pixel's color.
On the rightBelow, you can see the process of converting a image, in this case a .jpg, into an html <canvas> element.
- First, the image is prepared by converting it into a .bmp as it is the only format my program can work with currently.
- Second, the new .bmp is converted to text by my program. This text has a new row for each pixel, containing the pixel's hexadecimal color in decimal form, the x position, and the y position all delimited by comma's.
- Third, the text is used by another of my programs to encode a .bmp, or an html <canvas> element.
