Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dmnsgn/canvas-screenshot

A one trick pony package to download an image from a canvas.
https://github.com/dmnsgn/canvas-screenshot

canvas download downloader screenshot

Last synced: 26 days ago
JSON representation

A one trick pony package to download an image from a canvas.

Host: GitHub
URL: https://github.com/dmnsgn/canvas-screenshot
Owner: dmnsgn
License: mit
Created: 2018-09-25T18:25:46.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-01-22T21:45:04.000Z (11 months ago)
Last Synced: 2024-04-23T23:55:25.514Z (8 months ago)
Topics: canvas, download, downloader, screenshot
Language: JavaScript
Homepage: https://dmnsgn.github.io/canvas-screenshot/
Size: 6.02 MB
Stars: 13
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # canvas-screenshot

[![npm version](https://img.shields.io/npm/v/canvas-screenshot)](https://www.npmjs.com/package/canvas-screenshot)

[![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/canvas-screenshot)

[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/canvas-screenshot)](https://bundlephobia.com/package/canvas-screenshot)

[![dependencies](https://img.shields.io/librariesio/release/npm/canvas-screenshot)](https://github.com/dmnsgn/canvas-screenshot/blob/main/package.json)

[![types](https://img.shields.io/npm/types/canvas-screenshot)](https://github.com/microsoft/TypeScript)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)

[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)

[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)

[![license](https://img.shields.io/github/license/dmnsgn/canvas-screenshot)](https://github.com/dmnsgn/canvas-screenshot/blob/main/LICENSE.md)

A one trick pony package to download an image from a canvas.

[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)

[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)

[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)

![](https://raw.githubusercontent.com/dmnsgn/canvas-screenshot/main/screenshot.gif)

## Installation

```bash

npm install canvas-screenshot

```

## Usage

```js

import canvasScreenshot from "canvas-screenshot";

import canvasContext from "canvas-context";

// Create

const { context, canvas } = canvasContext("2d", {

  width: 100,

  height: 100,

});

// Draw

context.fillStyle = "salmon";

context.fillRect(40, 40, 20, 20);

// Export

const button = document.createElement("button");

button.addEventListener("click", () => {

  canvasScreenshot(canvas);

});

```

## API

## Modules



canvasScreenshot





## Typedefs





CanvasScreenshotOptions : object





Options for canvas screenshot. All optional.







## canvasScreenshot



### canvasScreenshot(canvas, [options]) ⇒ string \| Promise.<Blob> ⏏

Take a screenshot.

Setting `options.useBlob` to `true` will consequently make the module async and return the latter.

**Kind**: Exported function

**Returns**: string \| Promise.<Blob> - A `DOMString` or a `Promise` resolving with a `Blob`.

Type is inferred from the filename extension:

- png for `"image/png"` (default)

- jpg/jpeg for `"image/jpeg"`

- webp for `"image/webp"`

| Param     | Type                                                             | Default         | Description        |

| --------- | ---------------------------------------------------------------- | --------------- | ------------------ |

| canvas    | HTMLCanvasElement                                   |                 | The canvas element |

| [options] | [CanvasScreenshotOptions](#CanvasScreenshotOptions) | {} |                    |



## CanvasScreenshotOptions : object

Options for canvas screenshot. All optional.

**Kind**: global typedef

**Properties**

| Name       | Type                 | Default                                                         | Description                            |

| ---------- | -------------------- | --------------------------------------------------------------- | -------------------------------------- |

| [filename] | string  | "Screen Shot YYYY-MM-DD at HH.MM.SS.png" | File name.                             |

| [quality]  | number  | 1                                                  | Quality between 0 and 1.               |

| [useBlob]  | boolean |                                                                 | Use `canvas.toBlob`.                   |

| [download] | boolean | true                                               | Automatically download the screenshot. |

## License

MIT. See [license file](https://github.com/dmnsgn/canvas-screenshot/blob/main/LICENSE.md).