大约一年前,我创建了一个增强控制台日志的插件,主要思想是在控制台中打印图像,例如你可以添加一些图标或字形。
它工作得非常好,我看到现在有许多在线可用。问题是他们都没有工作。
我认为在最后一次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中在控制台中打印图像吗?
答案 0 :(得分:22)
尝试使用控制台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;');
答案 1 :(得分:1)
事实上,在调查同一问题时,我遇到了your console.image GitHub repository。虽然这篇文章很老,但learned from the horse's mouth它在Chrome Canary中有用。事实上,我在金丝雀尝试了your plugin demo并且能够看到旋转的鸡肉。我还没有发现为什么它突然停止在Chrome中工作。该功能仍适用于Firebug for Firefox。此处的console.log() documentation for Chrome仅展示基于文本的样式。
我找到了一个SO example,首先加载图像,然后使用console.log("%c....", "...");
应用样式。不幸的是,这仍然无法在“标准”Chrome中使用。
所以,简短的回答,看起来Canary现在支持控制台中的图像。
答案 2 :(得分:0)
我一直在寻找一个可以打印出整个图像而不会裁切并使其可调整大小的图像,我基本上想到了这一点:
df2 = pd.DataFrame(match, index=dates, columns=df['PERMNO'])
print (df2)
PERMNO 10006.0 10030.0 10049.0 10057.0 10078.0
1960-01-01 True True False True False
1980-01-01 True False False True False
,然后仅使用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;
};
打印图像。
该URL必须是有效URL,并且大小基本上是百分比,其中console.image(URL[, size]);
是默认值。如果该值小于100
,则可以缩小;如果该值大于100
,则可以扩展。