Console.image - Images in Chrome Dev tools
github.com
github.com
So now, I had to find a solution where only the whitelisted
properties are used but in the it was fairly simple.
I used the padding, line-height and font-size properties. I
set the padding on the left and right to half the width and
the top and bottom to the half the height of the image. I
then set the font-size to 1px to ensure it doesn't distort
the width. Since padding on an inline element has no effect
on it's dimensions, I used the line-height to manually set
the height and that displayed the images.
Maybe this could be useful if you're doing some stuff drawing onto a canvas off-screen and you want to blit some intermediate buffer into your console? console.image("data:image/png;base64,...");Is there an overview of all the memes? I feel like I could update my internet knowledge a lot through this.
Edit: I put up a version that logs all the included memes at http://fractality.neocities.org/memes.html
Image macros though are also fascinating, they seemed to have branched out to the general public over the last year or so.
Edit 1: Looks like they build the memes exactly that way. It still needs to convert the canvas to a data: url first, however, which might be a bit slow?
Edit 2: Looks like there might be a better, but non-standard and non-portable way of achieving that in WebKit browsers: http://updates.html5rocks.com/2012/12/Canvas-driven-backgrou...
I submitted it to the Chrome web store; it should now be available to install via https://chrome.google.com/webstore/detail/onmiijbokejkiadcpl...
If you prefer, you can clone my GitHub repo and install it in Chrome as an unpacked extension via the "Developer Mode" option in the extensions tab.
Unfortunately it only supports 5 columns :/
Related: http://xkcd.com/54/
It's a stretch, I know.
Also, it could be occasionally useful even. :)