`; }); } else { if(urlInput.value == "") { alert("You need to enter a URL!"); return; } if(!urlInput.validity.valid) { alert("URL isn’t valid; maybe try https:// at the start."); return; } GET(urlInput.value, function(blob) { readFile(blob, function(data) { imgSpace.innerHTML = `

`; }); }, function(error) { imageNotLoading(); if(error.match(/\d/g).join("") == 403) { alert("Sorry, but access to the file you are trying to locate is restricted. If you’re a hacker, bad luck."); return; } if(error.match(/\d/g).join("") == 404) { alert("Hmm, the URL leads to nothing! If you’ve checked and it works, here’s the error message:\n" + error); return; } alert("Something went wrong! Error message:\n" + error); }); } uploadBtn.disabled = true; uploadBtn.innerHTML = "Loading..."; }; selectEls(".infoBtn").forEach(function(btn) { btn.onclick = function() { switch(this.getAttribute("for")) { case "emojisInput": alert("Only the emojis in the textbox will be used in the emojification process. If some emojis don’t display correctly on your device, you can easily remove them by using the backspace character. (Remember I said it was a textbox? So there you go.) If you want to add emojis, you can add them by typing them in."); break; case "inputWidth": alert("The input width is how big the image will be drawn when it enters the emojification process. The placeholder (that’s the grey text BTW) is what we recommend as it is the natural width of the image you selected, so use that if you want the image to keep the same quality, but feel free to customise. The input height will be decided on by the ratio of old-width:new-width."); break; case "outputWidth": alert("The output width is how big the final product will be. The placeholder (that’s the grey text BTW) is what we recommend, as it is the natural width of the image you selected, so use that if you want the output image to be the same size as the input image. We recommend using a higher value, as then you will be able to see the emojis more clearly."); break; case "emojiAccuracy": alert("In order to match colours with emojis, we must draw them, iterate through each pixel, and average the RGB values. The emoji accuracy is how big the emoji will be when we draw it. We recommend 20, because it has fairly good resolution and doesn’t create much lag, but feel free to change to suit your needs."); break; case "resolution": alert("The resolution is how clear the final picture will be. Lower values = higher resolution, as it will scan through the image more, whereas higher values = lower resolution, as it will be skipping lost of pixels. We recommend using 3, as it still gives good-quality outputs, but doesn’t take too long."); break; default: break; } }; }); selectEls(".exampleUrlBtn").forEach(function(btn) { btn.onclick = function() { urlInput.value = this.value; uploadBtn.click(); }; }); steps = selectEl("#steps"); prevBtn = selectEl("#prevBtn"); nextBtn = selectEl("#nextBtn"); prevBtn.onclick = function() { stepNum--; if(stepNum == 0) { this.classList.add("hidden"); } if(stepNum == 1) { nextBtn.classList.remove("hidden"); } steps.style.right = stepNum * window.innerWidth + "px"; }; nextBtn.onclick = function() { if(!hasUploadedFile) { alert("You need to upload an image first!"); return; } if(emojisInput.value == "" && stepNum == 1) { alert("Enter some emojis first!"); return; } stepNum++; if(stepNum == 2) { this.classList.add("hidden"); } if(stepNum == 1) { prevBtn.classList.remove("hidden"); } steps.style.right = stepNum * window.innerWidth + "px"; }; container = selectEl("#container"); ui = selectEl("#ui"); processingEl = selectEl("#processingScreen"); outputEl = selectEl("#outputScreen"); startBtn = selectEl("#startBtn"); startBtn.onclick = function() { inputWidth.value = inputWidth.value || inputWidth.placeholder; var inputHeight = img.naturalHeight * (inputWidth.value / img.naturalWidth); outputWidth.value = outputWidth.value || outputWidth.placeholder; var outputHeight = img.naturalHeight * (outputWidth.value / img.naturalWidth); var emojisButNotQuite = [...emojisInput.value]; var emojis = []; emojisButNotQuite.forEach(function(em) { if(em.codePointAt(0) != 65039 && em.codePointAt(0) != 65038) { emojis.push(em); } }); emojiAccuracy.value = emojiAccuracy.value || emojiAccuracy.placeholder; ui.style.display = "none"; processingEl.style.display = "inline-block"; var can = selectEl("#can"); can.width = emojis.length * emojiAccuracy.value; can.height = emojiAccuracy.value; var ctx = can.getContext("2d"); ctx.font = emojiAccuracy.value + "px Arial"; ctx.textBaseline = "top"; for(var i = 0; i < emojis.length; i++) { ctx.fillText(emojis[i], i * emojiAccuracy.value, 0); } var pixels = ctx.getImageData(0, 0, can.width, can.height); var canData = pixels.data; var w = WebWorker(` var data = []; function Emoji(char, avgRGB) { this.char = char; this.avgRGB = avgRGB; } onmessage = function(e) { data.push(e.data); if(e.data == "start") { var emojis = data[0]; var canData = data[1]; var canHeight = data[2]; var canWidth = canHeight * emojis.length; var emojiObjects = []; for(var i = 0; i < emojis.length; i++) { if(emojis[i].codePointAt(0) == 65038 || emojis[i].codePointAt(0) == 65039) { continue; } var r, g, b; r = g = b = 0; var pixelsWithColour = 0; for(var y = 0; y < canHeight; y++) { for(var x = i * canHeight; x < (i + 1) * canHeight; x++) { var t = (x + y * canWidth) * 4; if(canData[t + 3] > 128) { r += canData[t]; g += canData[t + 1]; b += canData[t + 2]; pixelsWithColour++; } } } var pixelsThreshold = (r + g + b == 0)? canHeight * canHeight / 5 : canHeight * canHeight / 3; if(pixelsWithColour >= pixelsThreshold) { var avgCol = [r, g, b].map(function(ch) { return ch / pixelsWithColour; }); emojiObjects.push(new Emoji(emojis[i], avgCol)); } } postMessage(JSON.stringify(emojiObjects)); } }; `); w.onmessage = function(e) { var cols = JSON.parse(e.data); ctx.clearRect(0, 0, can.width, can.height); can.width = inputWidth.value; can.height = inputHeight; ctx.imageSmoothingEnabled = false; ctx.drawImage(imgSpace.querySelector("img"), 0, 0, can.width, can.height); var pixels = ctx.getImageData(0, 0, can.width, can.height); var data = pixels.data; var w2 = WebWorker(` var data = []; var emojisStr = ""; onmessage = function(e) { data.push(e.data); if(e.data == "start") { var canData = data[0]; var res = +data[1]; var canW = +data[2]; var canH = +data[3]; var emojis = JSON.parse(data[4]); for(var y = 0; y < canH; y += res) { for(var x = 0; x < canW; x += res) { var t = (x + y * canW) * 4; var r = canData[t]; var g = canData[t + 1]; var b = canData[t + 2]; var a = canData[t + 3]; if(a < 128) { r = g = b = 255; } var col = [r, g, b]; emojis.forEach(function(emoji) { emoji.difs = emoji.avgRGB.map(function(ch, i) { return Math.abs(ch - col[i]); }); emoji.dif = emoji.difs.reduce(function(a, b) { return a + b; }); }); var recordDif = { ch: "", dif: 0 }; emojis.forEach(function(emoji, i) { if(i == 0 || emoji.dif < recordDif.dif) { recordDif.ch = emoji.char; recordDif.dif = emoji.dif; } }); emojisStr += recordDif.ch; } emojisStr += "\\n"; } postMessage(emojisStr); } }; `); w2.onmessage = function(e) { var daOutput = e.data; ctx.clearRect(0, 0, can.width, can.height); can.width = outputWidth.value; can.height = outputHeight; var fontSize = outputWidth.value / (inputWidth.value / resolution.value) / 2; ctx.fillStyle = "black"; ctx.globalAlpha = 1; ctx.font = `${fontSize * (inputWidth.value == outputWidth.value? 1 : 1.5)}px Monospace`; ctx.textBaseline = "top"; daOutput.split("\n").forEach(function(line, i) { ctx.fillText(line, 0, i * fontSize * 2); }); var src = can.toDataURL(); var img = new Image(); img.onload = function() { processingEl.style.display = "none"; outputEl.style.display = "inline-block"; outputEl.appendChild(img); outputEl.innerHTML += "

You can either save the image to the camera roll or take a screenshot!

"; outputEl.innerHTML += "

Or as text, for copy and paste:

"; outputEl.innerHTML += `
`; outputEl.innerHTML += ""; outputEl.innerHTML += "

Like what you see? Please upvote to support me and to get more quality codes!

"; outputEl.innerHTML += "

Don’t like what you see? If you have the SoloLearn app, then please comment suggestions on how to make this better!

"; outputEl.innerHTML += "

Note: this is not 100% completed; there may be a few bugs that you might experience.

"; }; img.src = src; img.classList.add("outputImg"); }; w2.postMessage(data); w2.postMessage(resolution.value); w2.postMessage(can.width); w2.postMessage(can.height); w2.postMessage(JSON.stringify(cols)); w2.postMessage("start"); }; w.postMessage(emojis); w.postMessage(canData); w.postMessage(emojiAccuracy.value); w.postMessage("start"); }; }; function imageNotLoading() { uploadBtn.disabled = false; uploadBtn.innerHTML = "Upload"; hasUploadedFile = false; if(confirm("Oh no, the image doesn’t load! Are you sure that the image URL is correct?")) { alert("Many apologies. Unfortunately, there’s nothing we can do about that."); } else { alert("Please check the image URL."); } } function showImage() { img = imgSpace.querySelector("img"); inputWidth.placeholder = outputWidth.placeholder = img.naturalWidth; uploadBtn.disabled = false; uploadBtn.innerHTML = "Loaded!"; setTimeout(function() { uploadBtn.innerHTML = "Upload"; }, 2000); hasUploadedFile = true; } function copyOutput(el) { var textEl = selectEl("#outputTextEl"); textEl.select(); textEl.setSelectionRange(0, textEl.value.length); document.execCommand("copy"); textEl.blur(); el.innerHTML = "Copied!"; setTimeout(function() { el.innerHTML = "Copy"; }, 2000); } function readFile(file, callback) { var reader = new FileReader(); reader.onload = function() { callback(this.result); }; reader.readAsDataURL(file); } function GET(url, callback, error) { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if(this.readyState == 4) { if(this.status == 200) { callback(this.response); } else { error(`Error ${this.status}: ${this.statusText}`); } } }; req.open("GET", "https://cors-test5.herokuapp.com/" + url); req.responseType = "blob"; req.send(); } function WebWorker(code) { return new Worker(window.URL.createObjectURL(new Blob([code]))); }

Image to Emojis | Image Emojification