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[i + 1];
    blue += data[i + 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 🍻