谷歌Chrome控制台,打印图像

Question

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

它工作得非常好,我看到现在有许多在线可用.问题是他们都没有工作.

我认为,在最后一次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;");

例如这一个:github上的插件链接

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

Answer 1

尝试使用控制台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;');

Answer 2

Chrome 似乎在 Chrome 101 和 Edge 101 中删除了对控制台中背景图像的支持。

我不相信它在 Firefox 中起作用（至少在 Firefox 100 中不起作用）。

相比之下，它在 Safari 15.4 中仍然有效。

我一直试图找到一篇文章来解释为什么此功能从 Chrome/Edge 中删除，但到目前为止还没有找到。

Answer 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。