diff --git a/index.html b/index.html index 834d5b6..0b20ba1 100644 --- a/index.html +++ b/index.html @@ -148,6 +148,10 @@

1. Paste byte array


+
+ x + px +
@@ -319,6 +323,7 @@ this.first = function() { return collection[0]; }; this.last = function() { return collection[collection.length - 1]; }; this.getByIndex = function(index) { return collection[index]; }; + this.setByIndex = function(index, img) { collection[index] = img; }; this.get = function(img) { if(img) { for(var i = 0; i < collection.length; i++) { @@ -517,11 +522,18 @@ function handleTextInput(drawMode){ images = new Images(); - + var canvas = document.createElement('canvas'); - canvas.width = 128; - canvas.height = 64; + canvas.width = parseInt(document.getElementById("text-input-width").value); + canvas.height = parseInt(document.getElementById("text-input-height").value); + + if(canvasContainer.children.length) { + canvasContainer.removeChild(canvasContainer.firstChild); + } canvasContainer.appendChild(canvas); + + var image = new Image(); + images.setByIndex(0, {"img": image, "canvas" : canvas}); var input = document.getElementById('byte-input').value; @@ -936,7 +948,7 @@ ctx.putImageData(imgData, 0, 0); var img = new Image(); img.src = canvas.toDataURL('image/png'); - images.push(img); + images.first().img = img; } @@ -973,7 +985,7 @@ color = 255; } // color = 0; - drawPixel(x, (page*8)+y, color); + drawPixel(ctx, x, (page*8)+y, color); y--; if(y < 0){ y = 7; @@ -988,7 +1000,9 @@ } // Save the canvas contents inside the img object. This way we can // reuse the img object when we want to scale / invert, etc. + var img = new Image(); img.src = canvas.toDataURL('image/png'); + images.first().img = img; } @@ -1018,18 +1032,15 @@ // Quick and effective way to draw single pixels onto the canvas // using a global 1x1px large canvas - var ctx = images && images.last() ? images.last().ctx : undefined; - if(ctx) { + function drawPixel(ctx, x, y, color) { var single_pixel = ctx.createImageData(1,1); var d = single_pixel.data; - function drawPixel(x, y, color){ - d[0] = color; - d[1] = color; - d[2] = color; - d[3] = 255; - ctx.putImageData(single_pixel, x, y); - }/**/ + d[0] = color; + d[1] = color; + d[2] = color; + d[3] = 255; + ctx.putImageData(single_pixel, x, y); }