【转】在浏览器控制台输出图片或者banner

在浏览器控制台输出图片

今天无意中在百度知道页面打开了控制台，看到了控制台里居然有百度的logo

研究发现方法如下

if(!console){
    console = {}
    console.log = function(){}
}
 
 
function setConsoleImage(url){
    var img = new Image();
    img.style.display = "none";
    
    document.body.appendChild(img);
    img.src = url;
    img.onload = function(){
        
        var css = [
            'padding: ' + (img.height/2 - 8) + 'px ' + img.width/2 + 'px;',
            'line-height: ' + img.height +'px;',
            'background-image: url(' + url + ');'
        ]
        console.log('%c', css.join(''));
    }
}
 
window.onload = function(){
    setConsoleImage("xxx.jpg");
    setConsoleImage("xxx.gif")
}

console.log() 在浏览器控制台输出特殊字符编码的图案

1.这里有几个定制banner的网站，文字、图片都可以秀起来，怎么秀就看你的骚操作了

http://patorjk.com/software/taag

http://www.network-science.de/ascii/

http://www.degraeve.com/img2txt.php

2.对生成的字符图案进行处理

工具：Notepad++ 

先设置一下：

效果：就将换行符显示出来了

将\r\n 都替换成为 \n 需要两步：

打开替换界面（快捷方式：ctrl+H）

由于不能直接替换成\n，我们先替换成a，等会再替换\n.

你会发现整个text变成了一行，再次替换：

完成。

3.设置到console.log() 中，看是否成功。

让Console漂亮起来，在浏览器控制台添加网站说明

为了让喜欢按F12的访客不至于看到空空的控制台，写了点代码充实了下内容，也顺便复习下这部分内容。

console打印的文字是可以添加样式的，不过不是全部css效果都有效，这里只介绍一小部分样式。

是换行，可以将一个字符串设置成多行

%c标记之后的内容使用对应样式，格式如 console.log(’%c第一个样式%c第二个样式’,’css1’,’css2’); 如此对应

样式和普通的css效果基本一致，可以设置文字颜色，背景颜色，字体大小，间距，边距等等。还支持部分css3高级效果。

甚至还支持输出图片，不过我这里测试没有出现效果。

以下是我自己写的效果图：

 

 代码如下:

<!-- 控制台Console美化 -->
<script>
console.log("%c%c博客名称%c逸香阁博客","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c%c网站地址%chttp://www.coaadmin.cn","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;");
console.log("%c%c企鹅号码%c1449631172","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;");
console.log("%c%c任何足够先进的技术，初看皆与魔法无异！我一直觉得这句话很有道理，不知道你是不是也这样认为呢。","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");
</script>