console.log圖片彩蛋

球球發表於2023-05-09

近期接到了一個需求，把文案和圖片藏在網頁程式碼中，作為一個有趣的小彩蛋，實踐過程中發現有不少坑，跟大家分享下 ₍ᐢ..ᐢ₎♡ ˗ˋˏ♡ˎˊ˗

console.log

console.log() 方法向 Web 控制檯輸出一條資訊，在傳遞給 console 的方法的時候使用下面的字元以期進行引數的替換。

格式佔位符作用
%s字串
%d 或 %i整數
%f浮點數
%o可展開的DOM
%O列出DOM的屬性
%c根據提供的css樣式格式化字串

而彩蛋的實現可以使用 %c 為列印內容定義樣式，指令前的文字不會受到影響，但指令後的文字將會使用引數中宣告的 CSS 樣式。

console.log("控制檯 %c小彩蛋", "font-size: 20px; color: #fff; border-radius: 5px; padding: 10px 25px;background: linear-gradient(315deg, #cdb4db 0%, #ffafcc 50%, #a2d2ff 100%)");

圖片彩蛋

列印圖片 ?️ 的實現思路如下：

1、背景影像

由於只能定義樣式，所以 console 不支援 <img> 標籤，只支援使用 background-image 來設定背景圖。⚠️ 需要注意的是，設定背景圖需要帶有文字內容，不然是不生效的，因此在 %c 後面留有一個空白字元是必要的：

var style = [
  `background: url(${url}) center center no-repeat`,
].join(' ');
console.log("%c ", style);

2、尺寸大小

  • 由於不支援設定 width 和 height，需要使用 padding 和 line-height 來代替寬高；
  • font-size 需要設定為0，讓字型不佔用空間，否則空白字元也會撐出空間；
  • padding 不可缺少，否則只靠 line-height 高度雖然撐起來了但是會顯示空白；
  • chrome 瀏覽器不能設定 line-height，否則高度是圖片高度的 2倍；
  • 非 chrome 瀏覽器 需要設定 line-height，否則高度只靠 padding 撐不起來。
'font-size: 0px;',
!isChromium ? `line-height: ${this.height}px;` : '',
`padding: ${this.height / 2}px ${this.width / 2}px;`,

3、base64

另外，部分瀏覽器不支援網路圖片路徑，（即 background: url('https://xxx.png') ），比如 chrome 會顯示空白 ：

考慮到相容性問題，可以採用 base64 的方式。但是如果圖片較大，或者色彩比較豐富，那麼其 base64 編碼後的字串會非常大，可以透過 fetch 請求實時地將圖片轉成 base64：

async function getBase64FromUrl (url) {
    const data = await fetch(url);
    const blob = await data.blob();
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => {
            const base64data = reader.result;
            resolve(base64data);
        }
        reader.onerror = reject;
    });
}

4、擴充套件 console

最後擴充套件 console 物件，新增 image 方法

console.image = function(url) {
  const image = new Image();
  image.onload = function () {
    var isChromium = navigator.userAgent.match(/chrome|chromium|crios/i) && !!window.chrome;
  var style = [
    'font-size: 0px;',
    !isChromium ? `line-height: ${this.height}px;` : '',
    `padding: ${this.height / 2}px ${this.width / 2}px;`,
    `background: url(${url}) center center no-repeat;`,
    'background-size: contain;',
  ].join(' ');
  console.log('%c ', style);
  };
  image.src = url;
};

getBase64FromUrl(imgUrl).then(console.image);

⚠️ 注意

有一點要提醒大家，Firefox 只支援 8kb 大小的圖片資源，一旦超過這個數量就會顯示空白。如果需要相容火狐的，建議把圖片壓縮至 8kb 以下。

參考

Log images to the DevTools Console with console.image()

How to display images in the JavaScript console of the Browser

consoleimg

相關文章