在前端開發(fā)過程中，調(diào)試的時(shí)候，我們會(huì)使用 console.log 等方式查看數(shù)據(jù)。但對于圖片來說，僅靠展示的數(shù)據(jù)與結(jié)構(gòu)，是無法想象出圖片最終呈現(xiàn)的樣子的。

雖然我們可以把圖片數(shù)據(jù)通過 img 標(biāo)簽展示到頁面上，或?qū)D片下載下來進(jìn)行預(yù)覽。但這樣的調(diào)試過程實(shí)在是復(fù)雜，何不實(shí)現(xiàn)一個(gè) console.image() 呢？

先上演示案例：

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

（chrome 瀏覽器上演示效果）

實(shí)現(xiàn) console.image()：

參考 Github 上已實(shí)現(xiàn)的庫 https://github.com/adriancooney/console.image Star 1.8k(本文發(fā)布前)。 實(shí)現(xiàn)代碼如下：

// 實(shí)現(xiàn) console.image 函數(shù)【注意，url如果是網(wǎng)絡(luò)圖片必須開啟了跨域訪問才能打印】
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如果是網(wǎng)絡(luò)圖片則必須開啟了跨域訪問才能打印圖片】
console.image("替換為 圖片 url", 0.5);
// 支持 base64
console.image("替換為 base64 字符串", 1);

上面僅展示 console.image() 的代碼，因?yàn)樵瓗爝€包含 console.meme() 的實(shí)現(xiàn)，用于在控制臺(tái)生成表情包，感興趣的同學(xué)可以去該庫查看詳情。

該庫上一次更新已經(jīng)將近10年了，由于近些年 Chrome 控制臺(tái)中工作方式有變更，導(dǎo)致作者原版實(shí)現(xiàn)會(huì)使圖片重復(fù)顯示一次。 遇到相同問題的人提了 issues，本文章代碼已根據(jù) issues 里提供的解決方案進(jìn)行了修復(fù)。

實(shí)現(xiàn)說明：

console.image() 借助于 console.log 能夠使用 %c 為打印內(nèi)容定義樣式 的方式進(jìn)行實(shí)現(xiàn)，例如：

// 下面的代碼將會(huì)在控制臺(tái)打印出帶樣式的文本
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