From dec8540671152e9aaa35a6f3c153397b4d549f60 Mon Sep 17 00:00:00 2001 From: Yoni W Date: Sat, 23 Jan 2021 20:38:22 -0500 Subject: [PATCH 1/2] working positive --- index.html | 8 ++--- text_image.js | 86 +++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 70 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 9abf5fc..546decc 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

Verbose DaVinci

- + @@ -27,9 +27,9 @@

Verbose DaVinci

- - - +
+
+
diff --git a/text_image.js b/text_image.js index bde46b2..6f065d6 100644 --- a/text_image.js +++ b/text_image.js @@ -1,22 +1,36 @@ // Add Text to image +let scaleFactor = 1.0; +let colorCanvas = document.getElementById("canvasOutput"); +let textCanvas = document.getElementById("textOutput"); + + +function componentToHex(c) { + var hex = c.toString(16); + return hex.length == 1 ? "0" + hex : hex; +} + +function rgbToHex(r, g, b) { + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); +} function onClickConvert(){ let text = document.getElementById("input-text"); - let canvas = document.getElementById("canvasOutput"); - let canvasContext = canvas.getContext('2d'); + let colorCanvas = document.getElementById("canvasOutput"); + let textCanvas = document.getElementById("textOutput") + let canvasContext = colorCanvas.getContext('2d'); //canvasContext.clearRect(0,0,canvas.width,canvas.height) // Clear It - canvasContext.font="30px Arial"; // Set Font + canvasContext.font="10px Arial"; // Set Font //canvasContext.fillText(text.value, 10, 50); // Add the text - resizeCanvas(canvas, text.value) - - wrapText(canvas, text.value); + resizeCanvas(colorCanvas, textCanvas, text.value) + wrapText(textCanvas, text.value); + console.log({canvas: colorCanvas, textCanvas}) // Create Downloadable image png - createDownload(canvas) + createDownload(colorCanvas) //console.log(text.value); @@ -32,7 +46,7 @@ function createDownload(canvas){ } function getLineHeight(ctx) { - return parseInt(ctx.font.split('px')[0]);; + return parseInt(ctx.font.split('px')[0]); } function wrapText(canvas, str){ @@ -68,7 +82,7 @@ function wrapText(canvas, str){ } line += letter; - ctx.fillText(letter, x, y); + drawLetter(colorCanvas, letter, x, y); x+= metric.width; @@ -79,19 +93,33 @@ function wrapText(canvas, str){ } -function resizeCanvas(canvas, str) { - let ctx = canvas.getContext('2d') +function getColor(canvas, x,y){ + let ctx = document.getElementById("canvasOutput").getContext('2d') + + let colorX = x / scaleFactor; + let colorY = y / scaleFactor; + let data = ctx.getImageData(colorX, colorY, 1, 1).data + let colorHex = rgbToHex(data[0],data[1],data[2]) + //"#fe3482" + console.log(colorHex); + return colorHex; +} - let charWidth = ctx.measureText("abcdefghijklmnopqrstuvwxyz").width/26; +function resizeCanvas(inputCanvas, outputCanvas, str) { + let ctx = inputCanvas.getContext('2d') + + let charWidth = ctx.measureText(str).width/str.length; let charHeight = getLineHeight(ctx); - let xRatio = canvas.width / charWidth - let yRatio = canvas.height / charHeight + let xRatio = inputCanvas.width / charWidth + let yRatio = inputCanvas.height / charHeight + + scaleFactor = str.length/(xRatio*yRatio) - let scaleFactor = str.length/(xRatio*yRatio) + outputCanvas.width = inputCanvas.width * scaleFactor; + outputCanvas.height = inputCanvas.height * scaleFactor; - canvas.width = canvas.width * scaleFactor; - canvas.height = canvas.height * scaleFactor; + outputCanvas.getContext('2d').font = ctx.font; } /** @@ -102,7 +130,25 @@ function resizeCanvas(canvas, str) { * @param y * @return Return if the character has been successfully drawn at position, if not return false */ -function drawLetter(ctx, char, x, y){ - ctx.fillText(char,x,y) - return true +function drawLetter(canvas, char, x, y){ + /** + * if there is color at x,y + * increment the x,y to next pos + * return false + * else if there is color + * filltext + * return true + */ + let ctx = textCanvas.getContext('2d') + // if(ctx.ucharPtr(x, y)[0] != null || ctx.ucharPtr(x, y)[0] != 0){ + // return; + // }else{ + + let drawColor = getColor(colorCanvas, x,y) + + ctx.fillStyle = drawColor; + ctx.fillText(char,x,y); + return true; + // } + } From c9090107b10a8cb2f0c940cac3a1667b014de81b Mon Sep 17 00:00:00 2001 From: Yoni W Date: Sat, 23 Jan 2021 21:09:54 -0500 Subject: [PATCH 2/2] working now-ish --- index.html | 4 ++-- style.css | 5 +++++ text_image.js | 9 +++++---- 3 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 546decc..571c9e7 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,6 @@