Neptune: Planet or Myth?
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    histogram-componentpublic

    histogram

    JavaScript image histograms with Canvas.

    js histogram

    Installation

    $ component install component/histogram
    

    Or use without component:

    $ component build --standalone histogram
    

    Example

    <!DOCTYPE html>
    <html>
    <head>
      <title>Histogram</title>
      <style>
        .histogram {
          background: #1a1a1a;
        }
        .histogram .channel {
          opacity: .4;
        }
        .histogram .red {
          color: #dc1e1a;
        }
        .histogram .green {
          color: #12b81c;
        }
        .histogram .blue {
          color: #46a3d6;
        }
      </style> 
    </head>
    <body>
      <canvas width=200 height=120></canvas>
      <script src="build/build.js"></script> 
     
      <script>
        var histogram = require('histogram');
        var canvas = document.querySelector('canvas');
     
        var img = document.createElement('img');
        img.src = 'your img here';
     
        histogram(img)
          .smooth(12)
          .draw(canvas);
      </script> 
    </body>
    </html>

    Styling

    By default the histogram will be completely black, for example the following has only an opacity applied:

    Using CSS you can style the canvas histogram however you like, for example the following CSS:

    .histogram .channel {
      opacity: .4;
    }
    .histogram .red {
      color: #dc1e1a;
    }
    .histogram .green {
      color: #12b81c;
    }
    .histogram .blue {
      color: #46a3d6;
    }

    yields:

    For the dark theme used in the first image on this page use:

    .histogram {
      background: #1a1a1a;
    }
    .histogram .channel {
      opacity: .4;
    }
    .histogram .red {
      color: #dc1e1a;
    }
    .histogram .green {
      color: #12b81c;
    }
    .histogram .blue {
      color: #46a3d6;
    }

    Scaling

    The histogram's size will adjust to fit the canvas size, so use whatever dimensions you prefer:

    API

    .smooth([n])

    By default no smoothing is applied:

    no smoothing

    When invoked without arguments (.smooth()) the default kernel of 6 is used:

    smoothing enabled

    You may also pass any kernel size you wish, here is 20 for example:

    larger kernel

    License

    MIT

    Keywords

    none

    install

    npm i histogram-component

    Downloadslast 7 days

    6

    version

    0.3.0

    license

    none

    last publish

    collaborators

    • avatar