images-map v1.0.0

Get Images

Get images is a simple library which maps response from various images api and returns to user (written in typescript).

Currently get images supports unsplash, pexels, pixabay and shutterstock

Note

• if you find this repo interesting do not forgot to give it a star.
• Create issue for service or feature you wish this library to have (should be added with 2-5 days)
• If you find a bug, open an issue on github and author would fix it within 24 hours
• You can find default response of all the api in documentation folder

Installation

npm install images-map --save

or

yarn add images-map

Usage

Get Api keys

Currently library supports getting images from

• unsplash
• pexels
• pixabay
• shutterstock

Create env object

Create env object with keys of services you want to use (skip the ones you don't)

let env_variables = {
  unsplash: "7fzpM8WE8YdUrkCPkxCVF2qrhnxYJKEgbxW5_5ywfko",
  pexels: "563492ad6f91700001000001d95e696f46034c75a28b9b0c57fffb62",
  giphy: "Ev0XdFOjjnl5iyx9uoBm9Dwcdgld2ETA",
  pixabay: "17716537-c49aa5a43713abefd73673b3b",
  shutterstock: {
    consumer_id: "opakkzFRKVEIpT6Amt75hZzsjAdrHnAq",
    consumer_secret: "izbMPYhShAb5xYGg",
  },
}

Note: Shutterstock requires consumer_id and consumer_secret

Initalise the service

import ImageServices, {
  QUERY_PARAMS,
  IMAGE_RESPONSE,
  IMAGE_DATA,
  SERVICENAME
} from "images-map";

const InitImageService = new ImageServices(EnvironmentVariables);

Endpoints

Get all images data

To get images for all the endpoints, create a query object and send it to InitImageService

const response = await InitImageService.getAllImages(query);

Here query is an object containing image filters

Query Object

Response

 [{
  name: {{SERVICENAME}},
  images: {
    width: number
    height: number
    color: string
    url: string
    name: string
    id: string
    siza_small_url: string
    imageSize?: string
  }
  error?: any
}]

Get image data from single service

const specificServiceData = await InitImageService.getSpecificServiceData(query)

Where query Object is same as above

Response

 [{
  name: {{SERVICENAME}},
  images: {
    width: number
    height: number
    color: string
    url: string
    name: string
    id: string
    siza_small_url: string
    imageSize?: string
  }
  error?: any
}]

Add blob to images

We have function not coupled with our main class, to use that you need to first import it

import {addBlobToImages} from 'images-map

and then pass the arrays of image objects recived from the image service

  const imagesWithBlob = await addBlobToImages(
    images
  );

this will return Array of images with blob in it

 [{
  width?: number
  height?: number
  color?: string
  url: string
  name: string
  id: string
  small_url?: string
  imageSize?: string
  image_blob: blob
}]

Add blob to image

import {addBlobToImage} from 'images-map

and the pass the Image Object recieved from image service

  const imagesWithBlob = await addBlobToImages(
    image
  );

and it will return the image object with blob

{
  width?: number
  height?: number
  color?: string
  url: string
  name: string
  id: string
  small_url?: string
  imageSize?: string
  image_blob: blob
}