download-canvas

Download Canvas

Usage no npm install needed!

<script type="module">
  import downloadCanvas from 'https://cdn.skypack.dev/download-canvas';
</script>

README

Download Canvas

Js to support download canvas

This package distribute from https://github.com/kaxi1993/canvas-to-image. Write by kaxi1993

Instalation

$ npm install download-canvas

Quick Start

downloadCanvas(canvasId, options);

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 interval
}

Download as jpg

downloadCanvas('my-canvas', {
    name: 'myImage',
    type: 'jpg',
    quality: 0.7
});

Download as png

downloadCanvas('my-canvas', {
    name: 'myImage',
    type: 'png',
    quality: 1
});

or

downloadCanvas('my-canvas');

Examples

<html>
<head></head>
<body>
    <canvas id="my-canvas"></canvas>
    ...
    <script src="/download-canvas/src/index.js"></script>
    <script>
        downloadCanvas('my-canvas', {
            name: 'myJPG',
            type: 'jpg',
            quality: 0.5
        });

        downloadCanvas('my-canvas', { 
            name: 'myPNG',
            type: 'png',
            quality: 1
        });
        
        downloadCanvas('my-canvas', {});
    </script>
</body>
</html>
or using browserify
browserify -r canvas-to-image > bundle.js
<html>
<head></head>
<body>
    <canvas id="my-canvas"></canvas>
    ...
    <script src="bundle.js"></script>
    <script>
        downloadCanvas('my-canvas', {
            name: 'myJPG',
            type: 'jpg',
            quality: 0.5
        });

        downloadCanvas('my-canvas', { 
            name: 'myPNG',
            type: 'png',
            quality: 1
        });
        
        downloadCanvas('my-canvas', {});
    </script>
</body>
</html>