open-index/open-npm huggingface dataset:
npm package: @image4io/image4ionodejssdk
Description: Node.js SDK for image4.io
Author: Gökhan Koçyiğit, Atakan Atamert
Latest version: 1.0.4

![altText](https://cdn.image4.io/i4io/logo-dark-side.png "Logo")

![altText](https://img.shields.io/github/package-json/v/Image4IO/image4ionodeSDK "License") 
![altText](https://img.shields.io/github/license/Image4IO/image4ionodeSDK "License") ![altText](https://img.shields.io/github/languages/top/Image4IO/image4ionodeSDK "Lang")

# Image4ioNodeSDK 
image4io is a full stack image manager that stores, optimizes and delivers for websites and mobile applications. This is the Nodejs SDK for image4io API.

## Configuration
To send requests to API, APIKey and APISecret must be given as string first. Required keys can be retrieved from image4io console.
```javascript
import Image4ioAPI = require('./Image4ioAPI');

var apiKey = 'apiKey';
var apiSecret = 'apiSecret';

var api = new Image4ioAPI.Image4ioAPI(apiKey, apiSecret);
```
## Available Requests
This SDK currently supports 16 requests.

* GetSubscription
* GetImage
* UploadImage
* FetchImage
* CopyImage
* MoveImage
* DeleteImage
* CreateFolder
* DeleteFolder
* ListFolder
* StartUploadStream
* UploadStreamPart
* FinalizeStream
* GetStream
* FetchStream
* DeleteStream

Documentation is available at: [image4io API Documentation](https://image4.io/en/documentation)

## Usage
### Default Usage
With Image4io, it is very straightforward to do an operation on your images. GetImage example can be seen below.
```javascript
var getRes = api.GetImage(new Models.GetImageRequest("/folderName/test.png"));
getRes.then(response => {
    //Response returns a JSON object, which can be accessed here
}).catch(error => {
    throw error;
})
```

### Unit Testing
Unit testing could be done by using chai and mocha packages. Complete test can be found in the Test.ts file. Tests are run by ``` npm  run tsc ``` then ```mocha test.js``` commands.
```javascript
describe('Image4IOAPITest', () => {
    it('GetTest', () => {
        var getRes = api.GetImageDetails(new Models.GetImageDetailsRequestModel("/test.png"));
        return getRes.then(response => {
            chai.expect(response.name).of.equals("/test.png");
        }).catch(error => {
            throw error;
        })
    })
```
## Requirements
 1) ```mocha, chai``` and ```request-promise``` npm packages.
 2) ```createReadStream``` from ```fs``` module.
 3) Valid Image4io account.
## Contact Us
Image4io team is always ready to support you, feel free to 
[contact us.](https://image4.io/en/contact)
## Follow Us
* [Image4io Blog](https://image4.io/en/blog)

* [Twitter](https://twitter.com/image4io)

* [LinkedIn]( linkedin.com/company/image4io/)
## Contribute 
1) You can build the library with ``` npm run build ```
2) For testing purposes, import your local library run ``` npm install --save ..\image4ionodeSDK\ ``` and you can use it. 
3) To contribute, please contact to us with PR or issues or email info@image4.io
## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @imageengine/imageengine-helpers
Description: A set of helper functions to generate ImageEngine custom urls with valid directives
Author: Siva Sankar Reddy Bogala
Latest version: 0.2.1

A tiny set of helpers and TS types for building [ImageEngine](https://imageengine.io) query URLs for your distribution.

These set of utilities only make sense if you want to use an object to declare your [directives](https://support.imageengine.io/hc/en-us/articles/360058880672-directives) for when retrieving assets from an ImageEngine distribution.

Install it with:

`npm install @imageengine/imageengine-helpers`

View on [npm](https://www.npmjs.com/package/@imageengine/imageengine-helpers)

Types:

```
export type IEFormat =
    "png"  |
    "gif"  |
    "jpg"  |
    "bmp"  |
    "webp" |
    "jp2"  |
    "svg"  |
    "mp4"  |
    "jxr"  |
    "avif" 
    "jxl"  ;


export type IEFit =
    "stretch"   |
    "box"       |
    "letterbox" |
    "cropbox"   |
    "outside"   ;


export interface IEDirectives {
    width?: number;                // the intrinsic width of the final image 
    height?: number;               // the intrinsic height of the final image
    auto_width_fallback?: number;  // if WURFL device detection should be tried with a
                                   // fallback value in case it fails

    scale_to_screen_width?: number;          // 0-100 float
    crop?: [number, number, number, number]; // [width, height, left, top]

    format?: IEFormat;  // the output format
    fit?: IEFit;        // the image fit in relation to the provided width/height

    compression?: number; // 0-100
    sharpness?: number;   // 0-100
    rotate?: number;      // -360-360

    inline?: true;                 // convert image to dataURL
    keep_meta?: true;              // keep EXIF image data
    no_optimization?: true;        // don't apply IE optimizations
    force_download?: true;
    max_device_pixel_ratio: 2.1;   // 1-4 float
};
```

For instance:

```js
import { build_IE_url, build_IE_directives, build_IE_query_string } from "imageengine-helpers";

let directives: IEDirectives = {
    width: 400,
    height: 200,
    fit: "cropbox", 
    compression: 10,
    inline: true,
    format: "png",
    force_download: true,
    max_device_pixel_ratio: 2.1
};

let source_url: string = "https://my_ie_distribution.imgeng.io/path/to_asset1.jpg";

let final_url: string = build_IE_url(source_url, directives);

/*
"https://my_ie_distribution.imgeng.io/path/to_asset1.jpg?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/

let directives_string: string = build_IE_directives(directives);

/*
"/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/

let query_string: string = build_IE_query_string(directives);

/*
"?imgeng=/w_400/h_200/m_cropbox/cmpr_10/in_true/f_png/dl_true"
*/
```
npm package: @imageengine/reactnative
Description: imageengine support for react-native
Author: imageengine
Latest version: 1.0.0

# ImageEngine React Native

This project provides a React Native package for building optimized image URLs using ImageEngine. It includes utility functions and components to handle responsive images efficiently.

## Live Demo

Check out our [CodeSandbox demo](https://codesandbox.io/p/sandbox/serene-wing-jtz6cl) to see the `imageengine-reactnative` package in action.

## Installation

`npm install @imageengine/reactnative`

## Usage

### Utilities (`src/utils.ts`)

- **`generateOptimizedImageUrl`**: Constructs an optimized image URL based on the provided `srcSet`, `deliveryAddress`, and other parameters.
- **`chooseAppropriateImage`**: Selects the best image from a `srcSet` that fits the available screen width.
- **`processUrl`**: Cleans up the URL by removing unwanted parts and checks for supported image formats.
- **`constructUrl`**: Builds the final image URL using the provided source and directives.

### Responsive Component (`src/responsive_comp.tsx`)

- **`ResponsiveImage`**: A React component that renders an image optimized for the current screen size. It uses `generateOptimizedImageUrl` to determine the best image URL to use.

### Example Application (`example/src/App.tsx`)

- **`App`**: Demonstrates the usage of the `ResponsiveImage` component with a predefined `srcSet`. It logs when the component is rendered and displays a sample image.

## Types

- **`IEFormat`**: Enum for supported image formats.
- **`IEFit`**: Enum for image fit options.
- **`IEDirectives`**: Class defining image transformation directives.
npm package: @imageengine/svelte
Description: Svelte components for seamless integration with ImageEngine
Author: Siva Sankar Reddy Bogala | sbogala@loginsoft.com | https://github.com/ssrbloginsoft
Latest version: 0.0.2

# ImageEngine Svelte

Seamlessly integrate optimized responsive images in your Svelte applications using ImageEngine Svelte components.

## Quick Start

The package includes four components:

- `ImageEngineProvider`
- `Image`
- `Picture`
- `Source`

To start using these components, place `ImageEngineProvider` above them in the DOM tree with the `deliveryAddress` prop set:

```svelte
<script>
  import { ImageEngineProvider } from "@imageengine/svelte";
</script>

<ImageEngineProvider deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
  <YourComponent />
</ImageEngineProvider>
```

### Example Usage

```svelte
<script>
  import { Image } from "@imageengine/svelte";
</script>

<section>
  <Image
    src="pick-ups/custom/unstoppable.jpg"
    srcSet={...}
    sizes={...}
    directives={...}
    {...otherProps}
  />
</section>
```

## Component Props Reference

### `ImageEngineProvider`

- `deliveryAddress`: ImageEngine Delivery Address.
  - Type: `string`
- `stripFromSrc`: Optionally strip a portion of the source string in all ImageEngine components.
  - Type: `string?`

### `Image`

- `src`: Relative path to the image.
  - Type: `string`
- `directives`: ImageEngine directives for optimization.
  - Type: `object?`
  - Properties:
    - `width`: Define desired width.
    - `autoWidthWithFallback`: Set width to auto (with fallback).
    - `height`: Define desired height.
    - `compression`: Adjust compression.
    - `outputFormat`: Define desired output format.
    - `fitMethod`: Define desired fit method.
    - `noOptimization`: Don't apply any optimizations to the origin image.
    - `sharpness`: Adjust sharpness.
    - `rotate`: Define rotation.
    - `scaleToScreenWidth`: Use WURFL to calculate screen's width and then scale the image accordingly.
    - `crop`: Crop the image [width, height, left, top].
    - `inline`: Convert the image into a data url.
    - `keepMeta`: Keep EXIF data.
    - `force_download`: Force download of the image.
    - `max_device_pixel_ratio`: Maximum device pixel ratio.
- `srcSet`: List of image variations for the image source set.
  - Type: `array?`
  - Properties:
    - `src`: Relative path to the image.
    - `width`: Width descriptor.
    - `directives`: Custom optimization instructions.

### `Picture`

This component wraps image components to provide a responsive container.

### `Source`

- `srcSet`: List of image variations for the image source set.
  - Type: `array`
  - Properties:
    - `src`: Relative path to the image.
    - `width`: Width descriptor.
    - `directives`: Custom optimization instructions.