Skip to content

Home

Jump to bottom
Lasha Kakhidze edited this page Mar 10, 2020 · 5 revisions

canvas-to-image

npm version npm

canvas-to-image extends FileSaver and simplifies way to save canvas as image.

Installation

$ npm install canvas-to-image

or

$ npm install @kaxi1993/[email protected]

Quick Start

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

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

canvasToImage(canvasEl, {
  name: 'myImage',
  type: 'jpg',
  quality: 0.7
});

Download as png

canvasToImage('myCanvas', {
  name: 'myImage',
  type: 'png',
  quality: 1
});

or

canvasToImage('myCanvas');

Examples

<html>
<head></head>
<body>
  <canvas id="myCanvas"></canvas>
  ...
  <script src="/canvas-to-image/js/canvas-to-image.min.js"></script>
  <script>
  const canvasEl = document.getElementById('myCanvas');

  canvasToImage(canvasEl, {
    name: 'myJPG',
    type: 'jpg',
    quality: 0.5
  });

  canvasToImage('myCanvas', { 
    name: 'myPNG',
    type: 'png',
    quality: 1
  });

  canvasToImage('myCanvas');
  </script>
</body>
</html>

License

Copyright (c) 2020 Lasha Kakhidze. This code is released under the MIT license.

Clone this wiki locally