Merge pull request #7 from VerboseDaVinci/text-image-thing

Text image thing
VerboseDaVinci · Jan 24, 2021 · fa697f9 · fa697f9
2 parents 68e0174 + c909010
commit fa697f9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <style>
     .content {
-        max-width: 500px;
         margin: auto;
         text-align: center;
     }
@@ -10,11 +9,12 @@
 <head>
     <meta charset="utf-8">
     <title>Verbose DaVinci</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body class="content">
 <h2 class="content">Verbose DaVinci</h2>
-<div>
-    <input type="text" id="input-text">
+<div class="content">
+    <input type="text" id="input-text" size="30" height="20">
     <button type="button" onclick="onClickConvert();">Add Text</button>
     <a id="download-anchor">
         <button type="button" id="download-button">Download</button>
@@ -27,9 +27,9 @@ <h2 class="content">Verbose DaVinci</h2>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
-        <canvas id="canvasR"></canvas>
-        <canvas id="canvasG"></canvas>
-        <canvas id="canvasB"></canvas>
+    </div>
+    <div class="textoutputcanvas">
+        <canvas id="textOutput"></canvas>
     </div>
 </div>
 

diff --git a/style.css b/style.css
@@ -0,0 +1,5 @@
+div{
+    overlfow: visible;
+    margin: auto;
+    text-align: center;
+}
diff --git 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);
@@ -26,13 +40,13 @@ function onClickConvert(){
 function createDownload(canvas){
     let link = document.getElementById('download-anchor');
     link.addEventListener('click', function(ev) {
-        link.href = canvas.toDataURL();
+        link.href = textCanvas.toDataURL();
         link.download = "davincis-masterpiece.png";
     }, false);
 }
 
 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,34 @@ 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"
+    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 = Math.sqrt(str.length/(xRatio*yRatio));
+    console.log("sqrt man");
+    outputCanvas.width = inputCanvas.width * scaleFactor;
+    outputCanvas.height = inputCanvas.height * scaleFactor;
 
-    let scaleFactor = str.length/(xRatio*yRatio)
+    console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor})
 
-    canvas.width = canvas.width * scaleFactor;
-    canvas.height = canvas.height * scaleFactor;
+    outputCanvas.getContext('2d').font = ctx.font;
 }
 
 /**
@@ -102,7 +131,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;
+    // }
+
 }