https://github.com/kaxi1993/canvas-to-image

Save Canvas as Image
https://github.com/kaxi1993/canvas-to-image

canvas download image

Last synced: about 1 month ago
JSON representation

Save Canvas as Image

• Host: GitHub
• URL: https://github.com/kaxi1993/canvas-to-image
• Owner: kaxi1993
• License: mit
• Created: 2016-05-23T17:23:29.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-16T13:38:49.000Z (almost 2 years ago)
• Last Synced: 2024-03-14T18:17:47.693Z (6 months ago)
• Topics: canvas, download, image
• Language: JavaScript
• Homepage:
• Size: 66.4 KB
• Stars: 23
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# canvas-to-image

[![npm version](https://badge.fury.io/js/canvas-to-image.svg)](https://badge.fury.io/js/canvas-to-image)

[![npm](https://img.shields.io/npm/dt/canvas-to-image.svg?maxAge=2592000)](https://www.npmjs.com/package/canvas-to-image)

**canvas-to-image** extends [FileSaver](https://github.com/eligrey/FileSaver.js/) and simplifies way to save canvas as image.

## Installation

```bash

npm install canvas-to-image

```

## Quick Start

```js

import canvasToImage from 'canvas-to-image';

canvasToImage(canvasEl, options);

canvasEl // canvas html element or id attribute of canvas 

options = {

  name: 'custom name', // default image

  type: 'jpg',         // default png, accepted values jpg or png

  quality: 0.4         // default 1, can select any value from 0 to 1 range

}

```

**Download as jpg**

```js

const canvasEl = document.getElementById('myCanvas');

canvasToImage(canvasEl, {

  name: 'myImage',

  type: 'jpg',

  quality: 0.7

});

```

**Download as png**

```js

canvasToImage('myCanvas', {

  name: 'myImage',

  type: 'png',

  quality: 1

});

or

canvasToImage('myCanvas');

```

## Examples

```js

import React, { useRef, useEffect } from 'react';

import canvasToImage from 'canvas-to-image';

const Canvas = props => {

  const canvasRef = useRef(null);

  useEffect(() => {

    const canvas = canvasRef.current;

    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#000000';

    ctx.beginPath();

    ctx.arc(50, 100, 20, 0, 2 * Math.PI);

    ctx.fill();

  }, []);

  const handleDownload = async () => {

    canvasToImage(canvasRef.current);

  };

  return (

    


      

      Download

    

  );

}


export default Canvas;

```

```html

  

  ...

  

  

    const canvasEl = document.getElementById('myCanvas');

    canvasToImage(canvasEl, {

      name: 'myJPG',

      type: 'jpg',

      quality: 0.5

    });

    canvasToImage('myCanvas', { 

      name: 'myPNG',

      type: 'png',

      quality: 1

    });

    canvasToImage('myCanvas');

  

```

## License

Copyright (c) 2020 Lasha Kakhidze. This code is released under the [MIT](https://github.com/kaxi1993/canvas-to-image/blob/master/LICENSE) license.

***