谷歌浏览器控制台，打印图像答案

【问题标题】：google chrome console, print image谷歌浏览器控制台，打印图像
【发布时间】：2016-08-21 11:59:34
【问题描述】：

大约一年前，我创建了一个插件来增强控制台日志，主要思想是在控制台中打印图像，例如，您可以添加一些图标或字形。

它工作得很好，我看到现在网上有很多可用的。问题是他们都没有在atm工作。

我认为是在上次 chrome 更新后注意到的。目前我有版本49.0.2623.112。

包括我在内的所有这些插件都以相同的方式工作：

console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");

比如这个：plugin link on github

有谁知道我们如何在新版本的 chrome 中在控制台中打印图像？

【问题讨论】：

在最新的文档中，在控制台中显示图像并没有什么新意：developers.google.com/web/tools/chrome-devtools/debug/console/…
是的，但是发生了一些事情，无法再打印了。
你可以通过一个问题标题做出更好的努力

标签： javascript google-chrome

【解决方案1】：

事实上，我在调查同一问题时遇到了your console.image GitHub repository。虽然帖子很旧，但我 learned from the horse's mouth 认为它可以在 Chrome Canary 中使用。事实上，我在 Canary 中尝试过 your plugin demo 并且能够看到旋转的鸡。我还没有弄清楚为什么它突然停止在 Chrome 中工作。该功能在 Firefox 的 Firebug 中仍然有效。此处的console.log() documentation for Chrome 仅展示基于文本的样式。

我找到了一个SO example，他们首先加载图像，然后使用console.log("%c....", "..."); 应用样式。不幸的是，这在“标准”Chrome 中仍然不起作用。

所以，简短的回答，看起来 Canary 现在支持控制台中的图像。

【讨论】：

【解决方案2】：

尝试使用控制台 F12 的代码示例：

console.log('%c ', 'font-size:400px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');

【讨论】：

添加backdround-size: contain; 可能会有用，这样图像就可以完全显示。
@AurelianoFarSuau g -> d 错字

【解决方案3】：

我一直在寻找一种可以打印出整个图像而无需剪切它并使其可调整大小的工具，我基本上想出了这个：

console.image = function(url, size = 100) {
  var image = new Image();
  image.onload = function() {
    var style = [
      'font-size: 1px;',
      'padding: ' + this.height/100*size + 'px ' + this.width/100*size + 'px;',
      'background: url('+ url +') no-repeat;',
      'background-size: contain;'
     ].join(' ');
     console.log('%c ', style);
  };
  image.src = url;
};

然后只需使用console.image(URL[, size]); 打印出图像。 URL 必须是有效的 URL，大小基本上是百分比，100 是默认值。小于100可以缩小，大于100可以展开。

【讨论】：