No Package Mishaps

    maggie

    0.1.0 • Public • Published

    Maggie

    🌅 Get precious image info from an input file

    This module does one thing right, returns information about the image selected in a html input file.

    Install

    $ npm i maggie -S
    

    Examples

    Log image width and height 🎆

    import {getInfo} from 'maggie';
     
    const inputElement = document.getElementById('my-input');
     
    getInfo(inputElement, info => {
      console.log(`Image dimensions ${info.width}x${info.height}`);
    });

    Preview the selected image 🌊

    getInfo('#my-input', info => {
      const preview = document.getElementById('img-preview');
     
      preview.src = info.src;
    });

    Get the average color 👽

    getInfo('#my-input', info => {
      const data = info.imageData;
      const length = data.length;
      const channelCount = 4; //red, green, blue, alpha
      const colorCount = length / channelCount;
      let red = 0; let green = 0; let blue = 0;
     
      for (let i = 0; i < length; i += channelCount) {
        red += data[i];
        green += data[+ 1];
        blue += data[+ 2];
      }
      
      red = Math.floor(red / colorCount);
      green = Math.floor(green / colorCount);
      blue = Math.floor(blue / colorCount);
     
      console.log(red, green, blue);
    });

    Info Object

    The returned info object has the following properties

    Property Type Description
    width Number Image width
    height Number Image height
    src String Image source
    element HTMLImageElement Image Dom element
    imageData ImageData ImageData element based on the image

    Author

    @zzarcon 🍻

    Keywords

    none

    Install

    npm i maggie

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • zzarcon