https://github.com/zzarcon/maggie

:sunrise: Get precious image info from an input file
https://github.com/zzarcon/maggie

Last synced: 11 days ago
JSON representation

:sunrise: Get precious image info from an input file

• Host: GitHub
• URL: https://github.com/zzarcon/maggie
• Owner: zzarcon
• License: mit
• Created: 2016-07-18T08:03:50.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-07-19T15:42:34.000Z (over 8 years ago)
• Last Synced: 2024-10-25T13:09:29.244Z (16 days ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 77
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


#Maggie

> :sunrise: 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** :fireworks:

```javascript

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** :ocean:

```javascript

getInfo('#my-input', info => {

  const preview = document.getElementById('img-preview');

  preview.src = info.src;

});

```

**Get the average color** :alien:

```javascript

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](https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement) | Image Dom element 

| imageData     | [ImageData](https://developer.mozilla.org/en/docs/Web/API/ImageData) | ImageData element based on the image

![](http://new.tinygrab.com/e14c28c92027bb04fa24facdb1a636d33ec8f8c9da.png)

###Author

[@zzarcon](https://twitter.com/zzarcon) :beers: