JSFiddle - React, Tailwind, and code Playground
JavaScript
img_url = 'https://i.imgur.com/SHo6Fub.jpg'; // (Mountain)
//img_url = 'https://i.imgur.com/CAUyU1v.jpg'; // (American Psycho)
//img_url = 'https://i.imgur.com/IJmuA62.gif'; // (Elmo)
//img_url = 'https://i.imgur.com/Kb9bVR1.jpg;' // (dat boi)
//img_url = 'https://i.imgur.com/TUo28GM.jpg' // (high def tiger)
//img_url = 'http://i.imgur.com/JcVrUXr.jpg' // (mickey mouse)
//img_url = 'http://i.imgur.com/VpzJT2h.gif' // (tiny icon)
get_image(img_url);
// function get_image(image_url) {
// var img_el = document.createElement('img');
// var xhr = new XMLHttpRequest();
// xhr.open('GET', image_url, true);
// xhr.responseType = 'blob';
// xhr.onreadystatechange = function() {
// if (xhr.readyState == XMLHttpRequest.DONE) {
// console.log("Downloaded the image.");
// var img = xhr.response;
// var urlCreator = window.URL || window.webkitURL;
// var image_url = urlCreator.createObjectURL(img);
// img_el.onload = function() {
// canvas = img_to_canvas(img_el);
// emoji_sized_canvas = emoji_sized(canvas);
// document.body.appendChild(emoji_sized_canvas);
// };
// img_el.src = image_url;
// }
// }
// xhr.send();
// }
function get_image(image_url, emoji_name) {
var img_el = document.createElement('img');
img_el.onload = function () {
canvas = img_to_canvas(img_el);
emoji_sized_canvas = emoji_sized(canvas);
document.body.appendChild(emoji_sized_canvas);
};
img_el.src = image_url;
}
function img_to_canvas(img) {
canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas_ctx = canvas.getContext('2d');
canvas_ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
return canvas;
}
function emoji_sized(canvas) {
var target_dim = emoji_dimensions(canvas.width, canvas.height);
var factor = 2;
var canvas_long_side = Math.max(canvas.width,...