EIIP (Elite India Image Processing) - Complete client-side image processing library with SVG/raster conversion, layer merging, cropping, effects/filters, PDF conversion, resizing, rotation, compression, watermarks, and color adjustment. Compatible with Re
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:
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.
EIIP is designed for efficient client-side image processing - reducing server load and providing instant results to your users:
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.
npm install eiip
yarn add eiip
<!-- 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>
Download eiip.js or eiip.min.js and include in your project:
<script src="path/to/eiip.min.js"></script>
// 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'
});
See EXAMPLES-NEW-FEATURES.md for comprehensive examples of:
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;
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;
}
}
}
<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>
For complete API documentation, see API-REFERENCE.md
Main EIIP Class:
const eiip = new EIIP(options);
Key Methods:
convertSvgToRaster(input, options) - Convert SVG to PNG/JPG/WebPconvertRasterToSvg(input, options) - Convert images to SVGmergeLayers(layers, options) - Merge multiple image layersdownloadImage(dataUrl, filename) - Download processed imagesDirect Class Access:
EIIP.SvgToRaster - SVG conversion classEIIP.RasterToSvg - Raster conversion classEIIP.ImageLayerMerger - Layer merging classComplete documentation with all options, examples, and advanced usage is available in API-REFERENCE.md
MIT License - Copyright (c) 2025 Saleem Ahmad (Elite India)
Saleem Ahmad (Elite India)
EIIP - Elite India Image Processing Library - Making frontend image processing simple and powerful! 🎨✨
FAQs
EIIP (Elite India Image Processing) - Complete client-side image processing library with SVG/raster conversion, layer merging, cropping, effects/filters, PDF conversion, resizing, rotation, compression, watermarks, and color adjustment. Compatible with Re
We found that eiip demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.