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

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 。

Answer 4

事实上，我在调查同一问题时遇到了你的 console.image GitHub 存储库。 虽然帖子比较老了，但是从马口中得知，它在Chrome Canary中是有效的。 事实上，我在 Canary 中尝试了你的插件演示，并且能够看到旋转的鸡。 我仍然没有发现为什么它突然在 Chrome 中停止工作。 该功能在 Firefox 的 Firebug 中仍然有效。 Chrome的console.log() 文档仅展示了基于文本的样式。

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

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

Answer 5

来自 Web Worker， document ， Image和Canvas不可用。 如果图像是ImageData ，它可以使用OffscreenCanvas打印到控制台：

function debugImage(imageData) {
  try {
    const c = new OffscreenCanvas(imageData.width, imageData.height);
    const ctx = c.getContext("2d");
    if (ctx) {
      ctx.putImageData(imageData, 0, 0);
      c.convertToBlob().then((blob) => {
        const dataUri = new FileReaderSync().readAsDataURL(blob);
        const style = `font-size: 300px; background-image: url("${dataUri}"); background-size: contain; background-repeat: no-repeat;`;
        console.log("%c     ", style);
      });
    }
  } catch (e) {
    console.error(e);
  }
}

使用 Chrome 108 测试。