wrapping like 8mile

VerboseDaVinci · Jan 24, 2021 · f27dd9a · f27dd9a
1 parent c0174bb
commit f27dd9a
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,18 @@
         margin: auto;
         text-align: center;
     }
+    .grid-container {
+        margin: auto;
+        display: flex;
+        justify-content: center;
+    }
+    .box-container{
+        flex: 1;
+    }
 </style>
 <html>
 <head>
+<!--    <link rel="shortcut icon" href="">-->
     <meta charset="utf-8">
     <title>Verbose DaVinci</title>
     <link rel="stylesheet" href="style.css">
@@ -21,19 +30,18 @@ <h2 class="content">Verbose DaVinci</h2>
         <button type="button" id="download-button">Download</button>
     </a>
 </div>
-<div>
-    <div class="inputoutput">
+<div class="grid-container">
+    <div class="inputoutput box-container">
         <img id="imageSrc" alt="No Image"/>
         <div class="caption"> <input type="file" id="fileInput" name="file"/></div>
     </div>
-    <div class="inputoutput">
+    <div class="inputoutput box-container">
         <canvas id="canvasOutput"></canvas>
     </div>
-    <div class="textoutputcanvas">
-        <canvas id="textOutput"></canvas>
-    </div>
 </div>
-
+<div class="textoutputcanvas">
+    <canvas id="textOutput"></canvas>
+</div>
 <script src="convert_image.js" type="text/javascript"></script>
 <script src="text_image.js" type="text/javascript"></script>
 <script type="text/javascript">

diff --git a/text_image.js b/text_image.js
@@ -3,44 +3,44 @@ let scaleFactor = 1.0;
 
 let colorCanvas = document.getElementById("canvasOutput");
 let textCanvas = document.getElementById("textOutput");
+let ignoreColor = "#ffffffff"
 
 
 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 rgbToHex(r, g, b, a) {
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b) + componentToHex(a);
 }
 
-function onClickConvert(){
+function onClickConvert() {
     let text = document.getElementById("input-text");
     let colorCanvas = document.getElementById("canvasOutput");
-    let textCanvas = document.getElementById("textOutput")
+    let textCanvas = document.getElementById("textOutput");
     let canvasContext = colorCanvas.getContext('2d');
-    let fontSize = document.getElementById('font-input').value
+    let fontSize = document.getElementById('font-input').value;
 
     //canvasContext.clearRect(0,0,canvas.width,canvas.height) // Clear It
     console.log({fontSize})
     canvasContext.font = fontSize + "px Arial"; // Set Font
     //canvasContext.fillText(text.value, 10, 50); // Add the text
 
-    resizeCanvas(colorCanvas, textCanvas, text.value)
+    smartResizeCanvas(colorCanvas, textCanvas, text.value);
 
     wrapText(textCanvas, text.value);
-    console.log({canvas: colorCanvas, textCanvas})
     // Create Downloadable image png
-    createDownload(colorCanvas)
+    createDownload(colorCanvas);
 
 
     //console.log(text.value);
 
 }
 
-function createDownload(canvas){
+function createDownload(canvas) {
     let link = document.getElementById('download-anchor');
-    link.addEventListener('click', function(ev) {
+    link.addEventListener('click', function (ev) {
         link.href = textCanvas.toDataURL();
         link.download = "davincis-masterpiece.png";
     }, false);
@@ -50,13 +50,13 @@ function getLineHeight(ctx) {
     return parseInt(ctx.font.split('px')[0]);
 }
 
-function wrapText(canvas, str){
+function wrapText(canvas, str) {
     /**
      * for letter in text{
-         * if x > canvas_width{
-         *     x = 0
-         *     y+=line_height
-         * }
+     * if x > canvas_width{
+     *     x = 0
+     *     y+=line_height
+     * }
      *
      * drawLetter(canvas, char, x,y)
      * x+= char_width
@@ -67,25 +67,30 @@ function wrapText(canvas, str){
 
     let x = lineHeight;
     let y = lineHeight;
-    let letter = " "
+    let letter = " ";
 
 
     let line = "";
     for (var i = 0; i < str.length; i++) {
         letter = str.charAt(i);
         var metric = ctx.measureText(letter);
 
+        if (y > canvas.height){
+            break;
+        }
 
-        if (x > canvas.width - lineHeight){
-            y+=lineHeight;
-            x=lineHeight;
+        if (x > canvas.width - lineHeight) {
+            y += lineHeight;
+            x = lineHeight;
             line = "";
         }
         line += letter;
 
-        drawLetter(colorCanvas, letter, x, y);
+        if (!drawLetter(colorCanvas, letter, x, y)){
+            i--;
+        };
 
-        x+= metric.width;
+        x += metric.width;
 
 
     }
@@ -94,74 +99,98 @@ function wrapText(canvas, str){
 }
 
 
-function getColor(canvas, x,y){
+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])
+    let data = ctx.getImageData(colorX, colorY, 1, 1).data;
+    let colorHex = rgbToHex(data[0], data[1], data[2], data[3]);
     //"#fe3482"
     return colorHex;
 }
 
 function resizeCanvas(inputCanvas, outputCanvas, str) {
-    let ctx = inputCanvas.getContext('2d')
+    let ctx = inputCanvas.getContext('2d');
 
-    let charWidth = ctx.measureText(str).width/str.length;
+    let charWidth = ctx.measureText(str).width / str.length;
     let charHeight = getLineHeight(ctx);
 
-    let xRatio = inputCanvas.width / charWidth
-    let yRatio = inputCanvas.height / charHeight
+    let xRatio = inputCanvas.width / charWidth;
+    let yRatio = inputCanvas.height / charHeight;
 
-    scaleFactor = Math.sqrt(str.length/(xRatio*yRatio));
+    scaleFactor = Math.sqrt(str.length / (xRatio * yRatio));
     console.log("sqrt man");
     outputCanvas.width = inputCanvas.width * scaleFactor;
     outputCanvas.height = inputCanvas.height * scaleFactor;
 
-    console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor})
+    console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor});
 
     outputCanvas.getContext('2d').font = ctx.font;
 }
 
-function smartResizeCanvas(inputCanvas, outputCanvas, str){
+function smartResizeCanvas(inputCanvas, outputCanvas, str) {
     let ctx = inputCanvas.getContext('2d')
 
-    let charWidth = ctx.measureText(str).width/str.length;
+    let charWidth = ctx.measureText(str).width / str.length;
     let charHeight = getLineHeight(ctx);
 
-    let xRatio = inputCanvas.width / charWidth
-    let yRatio = inputCanvas.height / charHeight
+    scaleFactor = 1;
+    let pixelRatio = getValidPixelRatio();
+    let xRatio = inputCanvas.width / charWidth;
+    let yRatio = inputCanvas.height / charHeight;
 
-    scaleFactor = Math.sqrt(str.length/(xRatio*yRatio));
-    console.log("sqrt man");
+    scaleFactor = Math.sqrt(str.length / (xRatio * yRatio * pixelRatio));
+    console.log("sqrt man 2: electric boogaloo");
     outputCanvas.width = inputCanvas.width * scaleFactor;
     outputCanvas.height = inputCanvas.height * scaleFactor;
 
-    console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor})
+    console.table({charWidth, charHeight, xRatio, yRatio, scaleFactor});
 
     outputCanvas.getContext('2d').font = ctx.font;
 }
 
-function getAvgXY(){
-let width = colorCanvas.width;
-let height = colorCanvas.height;
+function getValidPixelRatio() {
+    let width = colorCanvas.width;
+    let height = colorCanvas.height;
 
-    /**
-     *
-     * let xs = [];
-     * ley ys = [];
-     * for(int i = 0; i < width; i++){
-     *     ley yVal =0;
-     *     for(int j = 0; j < height; j++>){
-     *      yVal +=
-     *     }
-     * }
-     */
-    return true;
+    ctx = colorCanvas.getContext('2d');
+    let background = "#ffffffff";
+    let transparent = "#00000000";
+
+    let invalidPixels = 0;
+
+
+    for (var i = 0; i < width; i++) {
+        for (var j = 0; j < height; j++) {
+            let color = getColor(colorCanvas, i, j);
+
+            // if (i%50 === 1 && j%50 ===1) {
+            //     console.log({color})
+            // }
+
+            if (isWhite(color) || isTransparent(color)) {
+
+                invalidPixels++;
+                //console.log({color, invalidPixels})
+            }
+        }
+    }
+
+    let pixelRatio = 1 - (invalidPixels / (width * height));
+    console.log({pixelRatio, invalidPixels})
+    return pixelRatio;
 
 }
 
+function isWhite(hex){
+    return (hex[1] === 'f' && hex[3] ==='f' && hex[5] === 'f');
+}
+
+function isTransparent(hex){
+    return hex[8] === '0';
+}
+
 
 /**
  * Draw character at selected position
@@ -171,7 +200,7 @@ let height = colorCanvas.height;
  * @param y
  * @return Return if the character has been successfully drawn at position, if not return false
  */
-function drawLetter(canvas, char, x, y){
+function drawLetter(canvas, char, x, y) {
     /**
      * if there is color at x,y
      *  increment the x,y to next pos
@@ -180,16 +209,23 @@ function drawLetter(canvas, char, x, y){
      *  filltext
      *  return true
      */
-    let ctx = textCanvas.getContext('2d')
+    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)
+    let drawColor = getColor(colorCanvas, x, y);
 
+    if (isWhite(drawColor) || isTransparent(drawColor)){
+        ctx.fillStyle = "#00000000";
+        ctx.fillText(char, x, y);
+        return false;
+    } else {
         ctx.fillStyle = drawColor;
-        ctx.fillText(char,x,y);
+        ctx.fillText(char, x, y);
         return true;
+    }
+
     // }
 
 }