🎉 방금 브라우저 콘솔에서 이미지를 인쇄하기 위해 tiny NPM library을 게시했습니다!


console.log 와 비슷하지만 이미지의 경우: URL, Canvas 또는 Image 요소 또는 ImageBitmap에서 이미지를 인쇄할 수 있습니다.

사용 방법

import { initConsoleLogImg } from "console-log-img"

// Run this once to initialize the library
initConsoleLogImg({
  // Optionally, disable image dimensions logging (enabled by default)
  printDimensions: true,
})

// ... later in the code ...

// Print an image from a URI, at original size
console.img("https://openclipart.org/image/800px/5661")

// Print a Canvas at 30% zoom, also log canvas dimensions
const canvas = document.getElementById("my-canvas")
console.img(canvas, 0.3, true)

// Print a CanvasRenderingContext2D
const ctx = canvas.getContext("2d")
console.img(ctx, 0.5)

// Print an ImageBitmap at 100% zoom
const bitmap = await createImageBitmap(canvas)
console.img(bitmap, 1)

// Print an Image DOM element
const imgEl = document.getElementById("my-img")
console.img(imgEl)

DEMO

코드는 다양한 소스에서 수정되었으며 깔끔한 TypeScript 라이브러리에 포함되었습니다.

내부적으로는 스타일이 지정된 console.log와 함께 몇 가지 해킹을 사용하여 전달된 이미지로 배경을 설정합니다. 더 알고 싶다면 source code을 확인하세요.

이미지를 콘솔에 인쇄하려는 이유는 무엇입니까?

더 쉬운 디버깅

캔버스 렌더링의 디버깅을 더 쉽게 하기 위해 캔버스가 많은 앱(예: Inkarnate – 온라인 판타지 맵 편집기)에서 작업할 때 광범위하게 사용했습니다.

캔버스 시각화(예: 생성 아티스트) 또는 편집기나 생성기와 같은 기타 그래픽 앱 작업을 하는 사람들에게 특히 도움이 될 것이라고 생각합니다.

기타 용도

배너 고용. 웹 개발자를 팀에 초대하기 위해 콘솔 배너를 고용하는 멋진 바지를 표시하는 데 사용할 수 있습니다.

사기 방지. Facebook에서 사기 방지 콘솔 배너를 본 적이 있습니까? 이는 악당이 사용자를 조작하여 브라우저 콘솔에 나쁜 내용을 붙여넣는 것을 방지하기 위한 것입니다.

그게 다야! 도움이 되셨기를 바랍니다. 😃