Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitru/console-log-img
Print images to browser console - like console.log but for images, Canvas, ImageBitmap and more!
https://github.com/dmitru/console-log-img
canvas debugging html5-canvas imagebitmap js logging
Last synced: about 1 month ago
JSON representation
Print images to browser console - like console.log but for images, Canvas, ImageBitmap and more!
- Host: GitHub
- URL: https://github.com/dmitru/console-log-img
- Owner: dmitru
- License: mit
- Created: 2020-09-11T21:11:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-22T15:11:45.000Z (about 3 years ago)
- Last Synced: 2024-11-14T08:34:04.725Z (about 2 months ago)
- Topics: canvas, debugging, html5-canvas, imagebitmap, js, logging
- Language: TypeScript
- Homepage: https://codesandbox.io/s/console-log-img-test-bti64
- Size: 207 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Print Images to Browser Console from Any Source ⚡️
# What is it
It extends `window.console` to allow you print Canvases and images from various sources.
[VIEW DEMO](https://codesandbox.io/s/console-log-img-test-bti64)
### Use-cases
To help develop visual algorithms: generative design and art, image processing, etc.
This library extends the global `console` object with a new method to print an image from one of the many supported sources:
```typescript
console.img(
imgSource:
| string
| HTMLImageElement
| OffscreenCanvas
| ImageBitmap
| HTMLCanvasElement
| CanvasRenderingContext2D
| OffscreenCanvasRenderingContext2D
scale = 1,
printDimensions = true,
)
```
### Features
- ✅ supports many image source types: HTMLCanvasElement, OffscreenCanvas, Image elements, ImageBitmap, image URIs
- ✅ works in WebWorkers with OffscreenCanvas
- ✅ zero dependencies
- ✅ it's tiny!
- ✅ written in TypeScript
# Usage
```typescript
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);
```
# Install
```
npm i --save console-log-img
```
Or with Yarn:
```
yarn add console-log-img
```
# Acknowledgements & Thanks
- Source code was adapted from dunxrion/console.image
- Original created by Adrian Cooney
# Used By
Using console-log-img? Open an issue to add your company or project to this list.
- [Inkarnate](https://inkarnate.com)