<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;
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.