Code is written in Javascript, and I have posted it to codereview.stackexchange.com a few times to get idea's on improvements for my code.
Code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p id="Start"></p>
<p id="End"></p>
<div id="img_store" style="display:none"></div>
<textarea id="WriteThis"></textarea>
<button onclick="loadImageAndWrite('download.png');">Load Image and Write Text</button>
<script>
var ColorizeData = function(canvas) {
this.canvas = canvas;
this.charToDecTable = {};
this.decToCharTable = {};
}
ColorizeData.prototype.initTables = function(){
var charDecPairs = [
[" ","09"],
["\r","16"],
["\n","19"],
[" ","32"],
["!","33"],
['"',"34"],
["#","35"],
["$","36"],
["%","37"],
["&","38"],
["'","39"],
["(","40"],
["
","41"],
["*","42"],
["+","43"],
[",","44"],
["-","45"],
[".","46"],
["/","47"],
["0","48"],
["1","49"],
["2","50"],
["3","51"],
["4","52"],
["5","53"],
["6","54"],
["7","55"],
["8","56"],
["9","57"],
[":","58"],
[";","59"],
["<","60"],
["=","61"],
[">","62"],
["?","63"],
["@","64"],
["A","65"],
["B","66"],
["C","67"],
["D","68"],
["E","69"],
["F","70"],
["G","71"],
["H","72"],
["I","73"],
["J","74"],
["K","75"],
["L","76"],
["M","77"],
["N","78"],
["O","79"],
["P","80"],
["Q","81"],
["R","82"],
["S","83"],
["T","84"],
["U","85"],
["V","86"],
["W","87"],
["X","88"],
["Y","89"],
["Z","90"],
["[","91"],
["\\","92"],
["]","93"],
["^","94"],
["_","95"],
["`","96"],
["a","97"],
["b","98"],
["c","99"],
["d","100"],
["e","101"],
["f","102"],
["g","103"],
["h","104"],
["i","105"],
["j","106"],
["k","107"],
["l","108"],
["m","109"],
["n","110"],
["o","111"],
["p","112"],
["q","113"],
["r","114"],
["s","115"],
["t","116"],
["u","117"],
["v","118"],
["w","119"],
["x","120"],
["y","121"],
["z","122"],
["{","123"],
["|","124"],
["}","125"],
["~","126"],
["","127"]
];
for(i=0; i < charDecPairs.length; i++)
{
var pair = charDecPairs[I];
var cchar = pair[0];
var dec = pair[1];
this.charToDecTable[cchar] = dec;
this.decToCharTable[hex] = cchar;
}
}
ColorizeData.prototype.textToColor = function(arg){
var context = this.canvas.getContext("2d"
;
var upDown = 1;
var upDown1 = 1;
var leftRight = 0;
var cindex = 0;
arg = arg.toLowerCase();
do
{
if(cindex + 1 < arg.length)
{
if(cindex + 2 < arg.length)
{
context.fillStyle = rgbToHex(this.charToDecTable[arg.charAt(cindex)],this.charToDecTable[arg.charAt(cindex+1)],this.charToDecTable[arg.charAt(cindex+2)]);
cindex += 3;
}
else
{
context.fillStyle = rgbToHex(this.charToDecTable[prop], this.charToDecTable[arg.charAt(cindex+1)],0);
cindex += 2;
}
}
else
{
context.fillStyle = rgbToHex(this.charToDecTable[prop],0, 0);
cindex +=1;
}
if(context.fillStyle != "#000000"
{
if(cindex/3 < this.canvas.width) {
context.fillRect(leftRight, 0, 1, 1);
leftRight += 1;
}
else
{
if(upDown < this.canvas.height) {
context.fillRect(leftRight,upDown,1,1);
upDown += 1;
}
else
{
if(upDown1 < this.canvas.height) {
leftRight = 0
context.fillRect(leftRight,upDown1,1,1);
upDown1 +=1
}
else
{
if(leftRight < this.canvas.width -2) {
leftRight+= 1;
context.fillRect(leftRight,upDown1-1,1,1);
}
}
}
}
}
}while(cindex < arg.length)
}
function componentToHex(c) {
var hex = Number(c).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
ColorizeData.prototype.colorToText = function(arg)
{
var text = "";
var context = this.canvas.getContext("2d"
;
var size = 0;
for(var index = 0;index<4;index++)
{
switch (index)
{
case 0:
imgData = context.getImageData(0,0, this.canvas.width,1);
size = this.canvas.width;
break;
case 1:
imgData = context.getImageData(this.canvas.width - 1,1, 1,this.canvas.height - 1);
size = this.canvas.height - 1;
break;
case 2:
imgData = context.getImageData(0,1, 1,this.canvas.height - 1);
size = this.canvas.height - 1;
break;
default:
imgData = context.getImageData(1,this.canvas.height -1, this.canvas.width-2, 1);
size = this.canvas.width - 2;
}
for(var i = 0; i < size; i += 4) {
//hide this pixel.
imgData.data[i + 3] = 0;
//check red for 0
if(imgData.data[i + 0] != 0)
{
text += this.decToCharTable[imgData.data[i + 0]];
}
else
{
break;
}
//check green for 0
if(imgData.data[i + 1] != 0)
{
text += this.decToCharTable[imgData.data[i + 1]];
}
else
{
break;
}
//check blue for 0
if(imgData.data[i + 2] != 0)
{
text += this.decToCharTable[imgData.data[i + 2]];
}
else
{
break;
}
}
switch(index)
{
case 0:
context.putImageData(imgData,0,0);
break;
case 1:
context.putImageData(imgData,this.canvas.width - 1,1);
break;
case 2:
context.putImageData(imgData,0,1);
break;
case 3:
context.putImageData(imgData,1,this.canvas.height -1);
break;
default:
alert("fail"
;
}
}
document.getElementById(arg).innerText = text;
}
ColorizeData.prototype.loadImage = function(arg) {
var canvas = document.getElementById("myCanvas"
;
var context = canvas.getContext("2d"
;
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, 200, 200);
};
img.src = arg;
}
ColorizeData.prototype.loadImageAndRead = function(arg) {
var canvas = document.getElementById("myCanvas"
;
var context = canvas.getContext("2d"
;
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, 200, 200);
Colorizer.colorToText('Start');
};
img.src = arg;
}
ColorizeData.prototype.loadImageAndWrite = function(arg) {
var canvas = document.getElementById("myCanvas"
;
var context = canvas.getContext("2d"
;
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, 200, 200);
Colorizer.textToColor(document.getElementById("WriteThis"
.value);
};
img.src = arg;
}
ColorizeData.prototype.clear = function() {
var context = this.canvas.getContext("2d"
;
context.clearRect(0,0,this.canvas.width, this.canvas.height);
}
var Colorizer = new ColorizeData(document.getElementById("myCanvas"
);
Colorizer.initTables();
Colorizer.textToColor("Testing 123..."
;
</script>
</body>
</html>
Example of (1st) generation image is attached. This code is 3rd generation, translation tables changed so it wont work for this image.
1st generation code is here.
http://codereview.stackexchange.com/questions/77746/converting-text-to-colored-pixels-and-back-again
Thanks for all the decent reading material.
