如何在浏览器的JavaScript控制台中显示图像

本文概述

• 使用console.image
• 玩得开心

正如我们在文章”如何在JavaScript控制台上使用CSS进行自定义调试”中所写的那样, 你可以使用CSS根据需要在控制台上自定义消息。当我们按照你的意愿说时, 我们是真的。当用户访问控制台时, Facebook使用样式向用户显示警告(由于selfxss攻击)：

合理不是吗？但是, 你要使用图像而不是样式吗？你能行的 ！在本文中, 你将学习如何使用console.image库在控制台上显示图像。

使用console.image

控制台中没有console.image这样的方法, 但是由于@adriancooney编写的console.image库, 你将能够在控制台上轻松显示图像(甚至支持gif)。要在你的项目上开始使用该库, 请下载缩小的代码或源代码的副本, 并使用脚本标签在文档中添加对该文件的引用：

<!-- Add a reference from a local file -->
<script src="console.image.min.js"></script>

<!-- Or use a CDN -->
<script src="https://cdn.rawgit.com/adriancooney/console.image/c9e6d4fd/console.image.min.js"></script>

值得一提的是, 这仅适用于浏览器的控制台, 不适用于Node.js的终端。之后, 你将能够使用JavaScript访问console.image方法。

console.image方法需要在控制台中显示的图像的URL：

console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");

你还可以显示base64数据URI：

console.image("data:image/gif;base64, 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");

玩得开心

由于未知原因, 该库允许你在控制台中显示模因并在其上显示一些自定义文本(通常)。为此, 你可以使用console.meme函数。此方法期望将第一个参数应放置在图像顶部的Text作为第二个参数, 将应显示在图像底部的文本作为第二个参数, 将第三个参数应使用的Meme名称作为第四个参数第五个参数分别是将在控制台中显示的图像的宽度和高度：

console.meme("Not sure if memes in dev tools is stupid", "or disastrous.", "Not Sure Fry", 400, 300);

注意

除了提供要显示的模因名称之外, 你还可以将其更改为图像的URL或base64数据URI表示形式。

那应该在控制台上显示以下图像：

可能的模因选项是：

• “十个人”
• “第三届世界成功小子”
• ” 90年代的问题”
• ” Aaand它走了”
• “实际建议野鸭”
• “忠告狗”
• “忠告上帝”
• “几乎政治上正确的乡下人”
• “我是唯一一个”
• “古代外星人”
• “烦死的皮卡德”
• “讨厌童年的朋友”
• “讨厌Facebook的女孩”
• “反笑话鸡(公鸡)”
• “尴尬的企鹅”
• “回到我的祖父”
• “坏建议野鸭”
• “厄运思维”
• “熊格里尔斯”
• “振作起来”
• “明显的上尉”
• “化学猫”
• “大学新生”
• “自由大学”
• “屈尊的旺卡”
• “自白熊”
• “坦白的孩子”
• “困惑的甘道夫”
• “阴谋基努”
• “勇敢的狼”
• “约会网站凶手”
• “抑郁症的狗”
• “醉酒的宝贝”
• “英语的混蛋”
• “邪恶的绘图浣熊”
• “互联网小子的第一天”
• “第一世界的猫问题”
• “第一世界问题”
• “永远的孤独”
• “永远的怨恨母亲”
• “肮脏的单身汉青蛙”
• “肮脏的单身青蛙”
• ” Friendzone Fiona”
• “沮丧的Farnsworth”
• “操我, 对吗？”
• “黑帮宝贝”
• “好女孩吉娜”
• “好家伙格雷格”
• “奶奶找到了互联网”
• “磨我的齿轮”
• “脾气暴躁的猫(塔德)”
• “寄予厚望的亚洲父亲”
• “时髦咖啡师”
• “恐怖的房客”
• “我敢你塞缪尔·杰克逊”
• “我应该买船”
• “我太喜欢危险地生活”
• “白痴书呆子女孩”
• “疯狂狼”
• “小丑精神损失”
• “约瑟夫·杜克鲁斯”
• “笑话鳗鱼”
• “双关浣熊”
• “懒惰的大四学生”
• “疯狂的业力”
• “自欺欺人”
• “矩阵莫非斯”
• “蛋黄酱帕特里克”
• “音乐忽略八年级学生”
• “不确定油炸”
• “令人难以置信的郊区妈妈”
• “一个不简​​单”
• “过度依恋的女朋友”
• “过度男子汉”
• ” Paranoid鹦鹉”
• “人猿”
• “佩佩里奇农场记得”
• “哲学家”
• “优先彼得”
• “其他科学老师”
• ” Redditor的妻子”
• “复仇乐队的孩子”
• “草率事实”
• “渣cum脑”
• “渣cumStacy”
• “渣cum史蒂夫”
• “性遗忘犀牛”
• “庇护郊区妈妈”
• “不必多说了, 把我的钱拿去”
• “怀疑第三世界的孩子”
• “自鸣得意的海绵宝宝”
• “社会棒企鹅”
• “成功的孩子”
• “成功的黑人”
• “突然的清晰度”
• “技术受损的鸭子”
• “世界上最有趣的人”
• “租金太高”
• “坚韧的海绵宝宝”
• “无助的高中老师”
• “复仇爸爸”
• “这是哪一年？”
• ” X, X无处不在”
• “是的, 那太好了”
• ” Yo Dawg Xzibit”
• “你很糟糕, 你应该感到不好”
• “你将会度过难关”

如果你正在文档上使用画布, 并想在控制台上显示其结果, 则可以使用另一个库来实现相同的效果, 即console.snapshot。

调试愉快！