images-map

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

Value	Type	Default	Required	description	example
query	string	none	yes	search string for which you want to get results	london
min_height	string	null	no	minimum height for imabe	128
min_width	string	null	No	minimum width for the image	128
max_width	string	null	no	maximum width for the image	642
max_height	string	null	no	maximum height for the image	728
color	string	null	null	color peference for the image (comiing soon)	'red'
image_type	photo or illustration or vector	no	no	what type of image you want	"photo"
order	latest or relavent	no	no	what sort of image you want	relavent
page	number	no	no	use this to get more images or for pagination	2
per_page	number	no	no	number of results per page	20

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
}