ai-soulmate-sketch-filter

A JavaScript library to apply a stylized sketch filter reminiscent of AI-generated soulmate portraits to images. This package provides a simple and efficient way to enhance images with a unique artistic touch.

Installation

bash npm install ai-soulmate-sketch-filter

Usage Examples

Here are a few examples demonstrating how to use ai-soulmate-sketch-filter in various JavaScript environments.

Example 1: Basic Usage in Node.js

This example demonstrates loading an image from the file system, applying the filter, and saving the modified image. javascript const aiSoulmateSketchFilter = require('ai-soulmate-sketch-filter'); const fs = require('fs'); const sharp = require('sharp'); // Requires sharp library for image processing. Install with npm install sharp

async function applyFilterToFile(inputPath, outputPath) { try { const imageBuffer = fs.readFileSync(inputPath);

const filteredBuffer = await aiSoulmateSketchFilter(imageBuffer);

fs.writeFileSync(outputPath, filteredBuffer);
console.log(`Filter applied and saved to ${outputPath}`);

} catch (error) { console.error("Error processing image:", error); } }

// Example usage: applyFilterToFile('input.jpg', 'output.jpg');

Example 2: Applying the Filter in a Browser Environment

This example shows how to apply the filter to an image loaded in a browser and display the result in a canvas element. (Requires a suitable bundler like Webpack or Parcel and sharp configured for browser use). This is a simplified demonstration; actual implementation requires setting up a suitable build environment for browser compatibility. javascript // Assuming you have an image element with id "myImage" and a canvas element with id "myCanvas" const aiSoulmateSketchFilter = require('ai-soulmate-sketch-filter');

async function applyFilterToImage(imageElement, canvasElement) { const imageWidth = imageElement.naturalWidth; const imageHeight = imageElement.naturalHeight;

canvasElement.width = imageWidth;
canvasElement.height = imageHeight;

const context = canvasElement.getContext('2d');
context.drawImage(imageElement, 0, 0, imageWidth, imageHeight);

const imageData = context.getImageData(0, 0, imageWidth, imageHeight);
const imageBuffer = Buffer.from(imageData.data.buffer);

try {
    const filteredBuffer = await aiSoulmateSketchFilter(imageBuffer, { width: imageWidth, height: imageHeight });

    // Convert the Buffer back to ImageData
    const uint8ClampedArray = new Uint8ClampedArray(filteredBuffer);
    const newImageData = new ImageData(uint8ClampedArray, imageWidth, imageHeight);

    // Put the filtered ImageData back on the canvas
    context.putImageData(newImageData, 0, 0);


} catch (error) {
    console.error("Error processing image:", error);
}

}

// Example usage (assumes myImage and myCanvas are defined in your HTML): const imageElement = document.getElementById('myImage'); const canvasElement = document.getElementById('myCanvas');

imageElement.onload = () => { applyFilterToImage(imageElement, canvasElement); };

Example 3: Using with Express.js for a Simple API Endpoint

This example demonstrates how to create a simple API endpoint using Express.js to apply the filter to an image uploaded by a user. javascript const express = require('express'); const multer = require('multer'); // Requires multer for handling file uploads. Install with npm install multer const aiSoulmateSketchFilter = require('ai-soulmate-sketch-filter'); const sharp = require('sharp');

const app = express(); const port = 3000;

const upload = multer({ storage: multer.memoryStorage() });

app.post('/apply-filter', upload.single('image'), async (req, res) => { try { if (!req.file) { return res.status(400).send('No image file uploaded.'); }

    const imageBuffer = req.file.buffer;

    const filteredBuffer = await aiSoulmateSketchFilter(imageBuffer);

    res.set('Content-Type', 'image/jpeg'); // Or 'image/png' depending on your output format
    res.send(filteredBuffer);

} catch (error) {
    console.error("Error processing image:", error);
    res.status(500).send('Error applying filter.');
}

});

app.listen(port, () => { console.log(Server listening at http://localhost:${port}); });

API Summary

aiSoulmateSketchFilter(imageBuffer: Buffer, options?: { width?: number, height?: number }): Promise<Buffer>

Applies the soulmate sketch filter to the provided image buffer.

• imageBuffer: A Buffer containing the image data (e.g., JPEG, PNG).
• options: (Optional) An object containing the image's width and height. While the filter attempts to determine these automatically, providing them can improve performance and accuracy.
  • width: (Optional) The width of the image in pixels.
  • height: (Optional) The height of the image in pixels.

Returns: A Promise that resolves with a Buffer containing the filtered image data. The output format is generally JPEG, but may vary based on the input image format.

License

MIT

This package is part of the ai-soulmate-sketch-filter ecosystem. For advanced features and enterprise-grade tools, visit: https://supermaker.ai/image/blog/ai-soulmate-drawing-free-tool-generate-your-soulmate-sketch/