【轉】在瀏覽器控制台輸出圖片或者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>