Skip to content

Instantly share code, notes, and snippets.

@Gabelbombe
Created January 16, 2017 02:25
Show Gist options
  • Save Gabelbombe/6e10d5fafdb646d0572ee11da6075409 to your computer and use it in GitHub Desktop.
Save Gabelbombe/6e10d5fafdb646d0572ee11da6075409 to your computer and use it in GitHub Desktop.
Add a image to the web browsers console
(function(url) {
// Create a new `Image` instance
var image = new Image();
image.onload = function() {
// Inside here we already have the dimensions of the loaded image
var style = [
// Hacky way of forcing image's viewport using `font-size` and `line-height`
'font-size: 1px;',
'line-height: ' + this.height + 'px;',
// Hacky way of forcing a middle/center anchor point for the image
'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
// Set image dimensions
'background-size: ' + this.width + 'px ' + this.height + 'px;',
// Set image URL
'background: url('+ url +');'
].join(' ');
console.log('%c', style);
};
// Actually loads the image
image.src = url;
})('https://i.cloudup.com/Zqeq2GhGjt-3000x3000.jpeg');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment