<h1>Image to Emoji Converter</h1>

<h2>Frame Output</h2>

<pre>
  🟥🟧🟨🟩🟦🟪🟫⬛⬜
</pre>

<h2>256 x 144</h2>
<canvas id="myCanvas" width="256" height="144" style="border:1px solid #d3d3d4;">
    Your browser does not support the HTML51 canvas tag.
  </canvas>

<h2>182 x 72</h2>
  <canvas id="myCanvas2" width="182" height="72" style="border:1px solid #d3d3d4;">
    Your browser does not support the HTML51 canvas tag.
  </canvas>
<h2>File input</h2>
<input type="file" id="inp">

<h2>SQL</h2>
<textarea rows=8 cols=60>
    
</textarea>
pre{
    font-size: min(0.395vw, 5px);
}
document.getElementById('inp').onchange = function(e) {
  let img = new Image();
  img.src = URL.createObjectURL(this.files[0]);
  img.onload = loadImage;
  img.onerror = failed;
};

function failed() {
  console.error("The provided file couldn't be loaded as an Image");
}

function findLargest(num1, num2, num3) {
    if((num1 + num2 + num3) > 500){
        return "⬜"
    }
    if((num1 + num2 + num3) < 200){
        return "⬛"
    }
    if (num1 >= num2 && num1 >= num3) {
        return "🟥";
    } else if (num2 >= num1 && num2 >= num3) {
        return "🟩";
    } else {
        return "🟦";
    }
}



function loadImage() {
    
    
    console.log("loaded");
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(this, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
   
    let pixelCounter = 0;
    let imgData2 = {};
    imgData2 = new Uint8ClampedArray(182 * 144 * 4);
    let k = 0;
    let emojiData = [];
    let rowCounter = 0;
    emojiData[rowCounter] = "";
    emojiData[rowCounter + 1] = "";
    
    for (var i = 0; i < imgData.data.length; i += 4) {
        if(pixelCounter > 36 && pixelCounter < 219){
            let emoji = "⬛";
            if((imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) > 500){
                emoji = "⬜";
            }
            
            if(i % 8 == 0){
                if(imgData.data[i] > 127){
                    emojiData[rowCounter] += "🟥";
                }else{
                    emojiData[rowCounter] += emoji;
                };
            }else{    
                if(imgData.data[i + 1] > 127){
                    emojiData[rowCounter] += "🟩";
                }else{
                    emojiData[rowCounter] += emoji;
                };      
            } 

            if(i % 8 == 0){    
                if(imgData.data[i + 2] > 127){
                    emojiData[rowCounter + 1] += "🟦";
                }else{
                    emojiData[rowCounter + 1] += emoji;
                };
            }else{    
                    emojiData[rowCounter + 1] += findLargest(imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]);   
            }     
           
        imgData2[k] = imgData.data[i];
        imgData2[k + 1] = imgData.data[i + 1];
        imgData2[k + 2] = imgData.data[i + 2];
        imgData2[k + 3] = 255;
        k = k + 4; 
            
            
            
        }
        pixelCounter++;
        if(pixelCounter > 255){
            pixelCounter = 0;
            i += 256 * 4;
            // emojiData += "\r\n";
            rowCounter += 2;
            
        emojiData[rowCounter] = "";
        emojiData[rowCounter + 1] = "";
        }
    }
    const idata = ctx.createImageData(182, 144);
    idata.data.set(imgData2);
    
    const c1 = document.getElementById("myCanvas2");
    const ctx1 = c1.getContext("2d");
    ctx.putImageData(imgData, 0, 0);
    ctx1.putImageData(idata, 0, 0);
    
    let preTag = document.querySelector('pre');
    preTag.innerHTML = emojiData.join("\r\n");
    
    const textArea = document.querySelector('textarea');
    
    const frameID = 100;
    
    let sqlStr = "";
    for(x = 0; x < emojiData.length; x++){
        if(emojiData[x] != ""){
        sqlStr += "INSERT INTO video2 (frameid, rownum, rowdata) VALUES(" + frameID + ", " + (x + 1) + ", '" + emojiData[x] + "');";
        }
    }
        
    textArea.value = sqlStr;
    
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.