使用 JS 實現在瀏覽器控制台列印圖片 console.image()

在前端開發過程中，調試的時候，我們會使用 console.log 等方式查看數據。但對於圖片來說，僅靠展示的數據與結構，是無法想象出圖片最終呈現的樣子的。

雖然我們可以把圖片數據通過 img 標簽展示到頁面上，或將圖片下載下來進行預覽。但這樣的調試過程實在是複雜，何不實現一個 console.image() 呢？

先上演示案例：

線上演示 https://bi.cool/bi/W1P1cyq

（chrome 瀏覽器上演示效果）

實現 console.image()：

參考 Github 上已實現的庫 https://github.com/adriancooney/console.image Star 1.8k(本文發佈前)。 實現代碼如下：

// 實現 console.image 函數【註意，url如果是網路圖片必須開啟了跨域訪問才能列印】
console.image = function (url, scale) {
  const img = new Image()
  img.crossOrigin = "anonymous"
  img.onload = () => {
    const c = document.createElement('canvas')
    const ctx = c.getContext('2d')
    if (ctx) {
      c.width = img.width
      c.height = img.height
      ctx.fillStyle = "red";
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.drawImage(img, 0, 0)
      const dataUri = c.toDataURL('image/png')

      console.log(`%c sup?` ,
        `
          font-size: 1px;
          padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
          background-image: url(${dataUri});
          background-repeat: no-repeat;
          background-size: ${img.width * scale}px ${img.height * scale}px;
          color: transparent;
        `
      )
    }
  }
  img.src = url
}

使用方式：

// 支持 圖片地址【註意，url如果是網路圖片則必須開啟了跨域訪問才能列印圖片】
console.image("替換為 圖片 url", 0.5);
// 支持 base64
console.image("替換為 base64 字元串", 1);

上面僅展示 console.image() 的代碼，因為原庫還包含 console.meme() 的實現，用於在控制台生成表情包，感興趣的同學可以去該庫查看詳情。

該庫上一次更新已經將近10年了，由於近些年 Chrome 控制臺中工作方式有變更，導致作者原版實現會使圖片重覆顯示一次。 遇到相同問題的人提了 issues，本文章代碼已根據 issues 里提供的解決方案進行了修複。

實現說明：

console.image() 藉助於 console.log 能夠使用 %c 為列印內容定義樣式 的方式進行實現，例如：

// 下麵的代碼將會在控制台列印出帶樣式的文本
console.log("這是 %c一條帶樣式的消息", `
    font-style: italic;
    color: cyan;
    background-color: red;
`);

下載本案例源碼：https://bi.cool/bi/W1P1cyq

參考資料 Reference :
https://developer.mozilla.org/zh-CN/docs/Web/API/console