News for hackers. Stuff that matters.
Re:Console.image - Images in Chrome Dev tools by jffry on Saturday June 29, 2013 @09:14AM (#5962287)
This hack is simultaneously beautiful and horrifying.

  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,...");
Re:Console.image - Images in Chrome Dev tools by adriancooney on Saturday June 29, 2013 @11:26AM (#5962651)
That's a great idea! Although, you know the Dev tools has a canvas inspector built-in? Check out chrome://flags and enable the "Enable Developer Tools experiments.". Pop open the console and then Settings (bottom right corner cog) > Experiments > Canvas inspector. This enables the ability to profile a canvas and view the different states between draw functions. It's really nifty.
Re:Console.image - Images in Chrome Dev tools by jffry on Saturday June 29, 2013 @12:21PM (#5962862)
Thanks for the tip!