EIIP - Elite India Image Processing

A comprehensive client-side image processing library that delivers lightweight, efficient image processing directly in the browser. Reduce server load and provide instant results with powerful capabilities:

🎨 SVG to Raster Conversion - Convert SVG graphics to PNG, JPG, WebP with knitting effects
🖼️ Raster to SVG Conversion - Transform raster images to optimized SVG with color reduction
🔧 Advanced Layer Merging - Combine multiple image layers with positioning, scaling, and effects
✂️ Image Cropping - Crop to rectangle, circle, or aspect ratio
🌈 Image Effects & Filters - 10+ predefined effects: grayscale, sepia, vintage, and more
📄 PDF Conversion - Convert images to PDF directly in the browser
📏 Image Resize & Scale - Smart resizing with quality preservation (NEW v1.2.0!)
🔄 Image Rotation & Flip - Rotate and flip images (NEW v1.2.0!)
🗜️ Image Compression - Smart compression and optimization (NEW v1.2.0!)
💬 Text Overlay & Watermark - Add text and watermarks (NEW v1.2.0!)
🎨 Color Adjustment - Advanced color manipulation (NEW v1.2.0!)

Client-first design with zero server dependencies. Compatible with React, Angular, Vue.js, and vanilla JavaScript. Also works in Node.js environments for versatile deployment options.

✨ Features

SVG to Raster Converter

Convert SVG to PNG, JPG, JPEG, WebP formats
Flexible sizing with aspect ratio preservation
Advanced knitting effects and yarn textures
Multiple input methods (File, URL, String, DOM Element)
High-performance canvas-based rendering
Quality and compression controls

Raster to SVG Converter

Convert PNG, JPG, GIF, BMP, WebP to SVG
Intelligent color reduction and optimization
Configurable color palettes (2-16M colors)
Pixel-perfect conversion with customizable scaling
Color preset options for different use cases

Image Layer Merger

Merge multiple image layers into single output
Support for PNG, JPEG, SVG images
Advanced positioning (absolute, center, relative)
Layer effects: opacity, rotation, scaling, z-index
DPI scaling for print-quality output
Background color and transparency support

Image Cropper

Crop to specific rectangle area
Crop to perfect circle (ideal for avatars)
Crop to aspect ratio (Square, 16:9, 4:3, Instagram, Facebook cover, etc.)
Maintain image quality during cropping
Multiple input formats supported

Image Effects & Filters

10+ Built-in Effects: Grayscale, Sepia, Vintage, Blur, Sharpen, Invert
Color Adjustments: Brightness, Contrast, Warm, Cool
Intensity Control: Fine-tune effect strength (0.0 - 1.0)
Chain Effects: Apply multiple effects in sequence
Real-time Processing: Instant preview in browser

PDF Converter

Convert single or multiple images to PDF
Multiple page sizes: A4, Letter, Legal, A3, A5, Tabloid
Portrait and landscape orientations
Customizable margins
Image fitting options: contain, cover, fill
Client-side PDF generation (no server required)

Image Resize & Scale (NEW v1.2.0!)

Resize to specific dimensions with quality preservation
Scale by percentage factor
Create thumbnails automatically
Multiple fit modes: contain, cover, fill
Smart aspect ratio handling
High-quality image smoothing

Image Rotation & Flip (NEW v1.2.0!)

Rotate by any angle (90°, 180°, 270°, custom)
Flip horizontally or vertically
Automatic canvas sizing
Maintains image quality

Image Compression (NEW v1.2.0!)

Compress to target file size (KB)
Smart compression with quality auto-adjustment
Multiple format support (WebP, JPEG, PNG)
Optimization for web delivery
Compression ratio reporting

Text Overlay & Watermark (NEW v1.2.0!)

Add watermark text with opacity control
Custom text overlay with positioning
Multiple position presets (corners, center)
Font customization (family, size, color)
Text effects (shadow, stroke, background)
Bold and italic styles

Color Adjustment (NEW v1.2.0!)

Saturation adjustment (0-2x)
Hue rotation (-180° to +180°)
Lightness control (-50 to +50)
Vibrance enhancement (0-2x)
HSL color space manipulation
Real-time color transformation

🏎️ Client-Side Processing Power

EIIP is designed for efficient client-side image processing - reducing server load and providing instant results to your users:

✅ Why Client-Side?

Zero Server Load - All processing happens in the user's browser
Instant Processing - No network delays or server queues
Privacy First - Images never leave the user's device
Lightweight - Optimized JavaScript with minimal bundle size
Offline Capable - Works without internet connection
Scalable - Automatically scales with your user base

🖥️ Browser Performance

Modern Canvas API - Hardware-accelerated rendering
Web Workers Ready - Can be used in background threads
Memory Efficient - Smart garbage collection and cleanup
Cross-Platform - Works on desktop, mobile, and tablets

🔧 Server-Side Alternative

While EIIP excels at client-side processing, for advanced server-side image processing with more sophisticated features, consider EIGC (Elite India Graphics Core) - our comprehensive server-side image processing library with enterprise-grade capabilities.

📦 Installation

NPM Installation

npm install eiip

yarn add eiip

CDN Usage

<!-- Full version -->
<script src="https://unpkg.com/eiip@latest/eiip.js"></script>

<!-- Minified version -->
<script src="https://unpkg.com/eiip@latest/eiip.min.js"></script>

Direct Download

Download eiip.js or eiip.min.js and include in your project:

<script src="path/to/eiip.min.js"></script>

🚀 Quick Start

Basic Usage

// Initialize EIIP
const eiip = new EIIP({
    debug: true // Enable console logging
});

// Convert SVG to PNG
const svgResult = await eiip.convertSvgToRaster(svgString, {
    width: 800,
    height: 600,
    format: 'png',
    quality: 0.9
});

// Convert PNG to SVG
const rasterResult = await eiip.convertRasterToSvg(imageFile, {
    colorReductionLevel: 16, // 4,096 colors
    scaleFactor: 0.5
});

// Merge multiple image layers
const mergedResult = await eiip.mergeLayers([
    { src: 'background.png', x: 0, y: 0, zIndex: 1 },
    { src: 'logo.svg', x: 'center', y: 'center', scale: 0.5, zIndex: 2 }
], {
    format: 'png',
    quality: 0.9
});

// NEW: Crop image to circle (perfect for avatars)
const circularImage = await eiip.cropToCircle(imageFile, {
    size: 500,
    format: 'png'
});

// NEW: Apply vintage effect
const vintageImage = await eiip.applyEffect(imageFile, 'vintage', 0.8, {
    format: 'jpg',
    quality: 0.9
});

// NEW: Convert images to PDF
const pdf = await eiip.convertImagesToPDF([image1, image2, image3], {
    pageSize: EIIP.PDFConverter.PAGE_SIZES.A4,
    orientation: 'portrait'
});

New Features Examples

See EXAMPLES-NEW-FEATURES.md for comprehensive examples of:

Image cropping (rectangle, circle, aspect ratio)
Applying effects and filters
PDF conversion
Combined workflows

📚 Framework Integration

React Example

import React, { useState, useRef } from 'react';
import EIIP from 'eiip';

const ImageProcessor = () => {
    const [result, setResult] = useState(null);
    const [processing, setProcessing] = useState(false);
    const fileInputRef = useRef(null);

    const handleSvgToRaster = async (file) => {
        setProcessing(true);
        try {
            const eiip = new EIIP();
            const result = await eiip.convertSvgToRaster(file, {
                width: 1000,
                height: 800,
                format: 'png',
                quality: 0.95
            });
            setResult(result.dataUrl);
        } catch (error) {
            console.error('Processing failed:', error);
        } finally {
            setProcessing(false);
        }
    };

    const handleLayerMerging = async () => {
        setProcessing(true);
        try {
            const eiip = new EIIP();
            const result = await eiip.mergeLayers([
                { src: '/background.jpg', x: 0, y: 0, width: 800, height: 600 },
                { src: '/overlay.png', x: 'center', y: 'center', opacity: 0.7 }
            ]);
            setResult(result.dataUrl);
        } catch (error) {
            console.error('Merging failed:', error);
        } finally {
            setProcessing(false);
        }
    };

    return (
        <div className="image-processor">
            <input
                ref={fileInputRef}
                type="file"
                accept=".svg"
                onChange={(e) => handleSvgToRaster(e.target.files[0])}
            />
            
            <button onClick={handleLayerMerging} disabled={processing}>
                {processing ? 'Processing...' : 'Merge Layers'}
            </button>

            {result && (
                <div className="result">
                    <img src={result} alt="Processed" style={{ maxWidth: '100%' }} />
                    <button onClick={() => {
                        const eiip = new EIIP();
                        eiip.downloadImage(result, 'processed-image.png');
                    }}>
                        Download
                    </button>
                </div>
            )}
        </div>
    );
};

export default ImageProcessor;

Angular Example

import { Component } from '@angular/core';
import EIIP from 'eiip';

@Component({
  selector: 'app-image-processor',
  template: `
    <div class="image-processor">
      <input type="file" (change)="onFileSelect($event)" accept=".png,.jpg,.svg">
      <button (click)="processImage()" [disabled]="processing">
        {{ processing ? 'Processing...' : 'Process Image' }}
      </button>
      <img *ngIf="result" [src]="result" alt="Processed" style="max-width: 100%">
    </div>
  `
})
export class ImageProcessorComponent {
  selectedFile: File | null = null;
  result: string | null = null;
  processing = false;

  onFileSelect(event: any) {
    this.selectedFile = event.target.files[0];
  }

  async processImage() {
    if (!this.selectedFile) return;

    this.processing = true;
    try {
      const eiip = new EIIP();
      
      if (this.selectedFile.type.includes('svg')) {
        const result = await eiip.convertSvgToRaster(this.selectedFile, {
          format: 'png',
          quality: 0.9
        });
        this.result = result.dataUrl;
      } else {
        const result = await eiip.convertRasterToSvg(this.selectedFile, {
          colorReductionLevel: EIIP.RasterToSvg.COLOR_PRESETS.MEDIUM
        });
        // Convert SVG back to data URL for display
        const blob = new Blob([result.svg], { type: 'image/svg+xml' });
        this.result = URL.createObjectURL(blob);
      }
    } catch (error) {
      console.error('Processing failed:', error);
    } finally {
      this.processing = false;
    }
  }
}

Vue.js Example

<template>
  <div class="image-processor">
    <input 
      type="file" 
      @change="handleFileSelect" 
      accept=".svg,.png,.jpg"
      ref="fileInput"
    />
    
    <button @click="convertToRaster" :disabled="processing">
      {{ processing ? 'Converting...' : 'Convert to Raster' }}
    </button>
    
    <button @click="mergeLayers" :disabled="processing">
      {{ processing ? 'Merging...' : 'Merge Layers' }}
    </button>

    <div v-if="result" class="result">
      <img :src="result" alt="Processed" style="max-width: 100%" />
      <button @click="downloadResult">Download</button>
    </div>
  </div>
</template>

<script>
import EIIP from 'eiip';

export default {
  name: 'ImageProcessor',
  data() {
    return {
      selectedFile: null,
      result: null,
      processing: false,
      eiip: new EIIP({ debug: true })
    };
  },
  methods: {
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];
    },

    async convertToRaster() {
      if (!this.selectedFile) return;

      this.processing = true;
      try {
        const result = await this.eiip.convertSvgToRaster(this.selectedFile, {
          width: 800,
          height: 600,
          format: 'png'
        });
        this.result = result.dataUrl;
      } catch (error) {
        console.error('Conversion failed:', error);
      } finally {
        this.processing = false;
      }
    },

    async mergeLayers() {
      this.processing = true;
      try {
        const result = await this.eiip.mergeLayers([
          { src: '/assets/bg.jpg', x: 0, y: 0 },
          { src: '/assets/logo.png', x: 'center', y: 'center', scale: 0.3 }
        ]);
        this.result = result.dataUrl;
      } catch (error) {
        console.error('Merging failed:', error);
      } finally {
        this.processing = false;
      }
    },

    downloadResult() {
      if (this.result) {
        this.eiip.downloadImage(this.result, 'processed-image.png');
      }
    }
  }
};
</script>

📖 API Reference

For complete API documentation, see API-REFERENCE.md

Quick Reference

Main EIIP Class:

const eiip = new EIIP(options);

Key Methods:

convertSvgToRaster(input, options) - Convert SVG to PNG/JPG/WebP
convertRasterToSvg(input, options) - Convert images to SVG
mergeLayers(layers, options) - Merge multiple image layers
downloadImage(dataUrl, filename) - Download processed images

Direct Class Access:

EIIP.SvgToRaster - SVG conversion class
EIIP.RasterToSvg - Raster conversion class
EIIP.ImageLayerMerger - Layer merging class

Complete documentation with all options, examples, and advanced usage is available in API-REFERENCE.md

License

👨‍💻 Author

Saleem Ahmad (Elite India)

GitHub: @SaleemLww
Repository: EIIP-Frontend

EIIP - Elite India Image Processing Library - Making frontend image processing simple and powerful! 🎨✨

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.gitignore		.gitignore
API-REFERENCE.md		API-REFERENCE.md
LICENSE		LICENSE
README.md		README.md
eiip-demo.html		eiip-demo.html
eiip.js		eiip.js
eiip.min.js		eiip.min.js
eiip.min.js.map		eiip.min.js.map

License

SaleemLww/EIIP-Frontend

Folders and files

Latest commit

History

Repository files navigation

EIIP - Elite India Image Processing

✨ Features

SVG to Raster Converter

Raster to SVG Converter

Image Layer Merger

Image Cropper

Image Effects & Filters

PDF Converter

Image Resize & Scale (NEW v1.2.0!)

Image Rotation & Flip (NEW v1.2.0!)

Image Compression (NEW v1.2.0!)

Text Overlay & Watermark (NEW v1.2.0!)

Color Adjustment (NEW v1.2.0!)

🏎️ Client-Side Processing Power

✅ Why Client-Side?

🖥️ Browser Performance

🔧 Server-Side Alternative

📦 Installation

NPM Installation

CDN Usage

Direct Download

🚀 Quick Start

Basic Usage

New Features Examples

📚 Framework Integration

React Example

Angular Example

Vue.js Example

📖 API Reference

Quick Reference

License

👨‍💻 Author

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages