Nurturing Palpable Magnificence
    Wondering what’s next for npm?Check out our public roadmap! »

    canvas-to-image

    2.2.0 • Public • Published

    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/canvas-to-image@2.2.0

    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.


    Install

    npm i canvas-to-image

    DownloadsWeekly Downloads

    419

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar