亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

先上演示案例：

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

（chrome 瀏覽器上演示效果）

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

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

// 實現(xiàn) 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() 的實現(xiàn)，用于在控制臺生成表情包，感興趣的同學可以去該庫查看詳情。

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

實現(xiàn)說明：

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

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