Skip to content

Instantly share code, notes, and snippets.

@talbergs
Created June 15, 2017 19:27
Show Gist options
  • Save talbergs/c5ec54eadfed7ea514c419963d5f23f2 to your computer and use it in GitHub Desktop.
Save talbergs/c5ec54eadfed7ea514c419963d5f23f2 to your computer and use it in GitHub Desktop.
console.image
/**
* Dubiously created by Adrian Cooney
* http://adriancooney.github.io
*/
(function(console) {
"use strict";
/**
* Since the console.log doesn't respond to the `display` style,
* setting a width and height has no effect. In fact, the only styles
* I've found it responds to is font-size, background-image and color.
* To combat the image repeating, we have to get a create a font bounding
* box so to speak with the unicode box characters. EDIT: See Readme.md
*
* @param {int} width The height of the box
* @param {int} height The width of the box
* @return {object} {string, css}
*/
function getBox(width, height) {
return {
string: "+",
style: "font-size: 1px; padding: " + Math.floor(height/2) + "px " + Math.floor(width/2) + "px; line-height: " + height + "px;"
}
}
/**
* Display an image in the console.
* @param {string} url The url of the image.
* @param {int} scale Scale factor on the image
* @return {null}
*/
console.image = function(url, scale) {
scale = scale || 1;
var img = new Image();
img.onload = function() {
var dim = getBox(this.width * scale, this.height * scale);
console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");
};
img.src = url;
};
})(console);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment