ai-soulmate-sketch-filter

A JavaScript utility to apply a stylized sketch filter, simulating a hand-drawn portrait, to images. Enhance your image processing workflows with this unique artistic effect.

Installation

Install the package using npm: bash npm install ai-soulmate-sketch-filter

Usage Examples

Here are several ways you can integrate ai-soulmate-sketch-filter into your JavaScript projects:

1. Basic Image Processing in Node.js: javascript const aiSoulmateSketchFilter = require('ai-soulmate-sketch-filter'); const fs = require('fs'); const { createCanvas, loadImage } = require('canvas');

async function applySketchFilter(inputImagePath, outputImagePath) { try { const image = await loadImage(inputImagePath); const canvas = createCanvas(image.width, image.height); const ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0, image.width, image.height);

const imageData = ctx.getImageData(0, 0, image.width, image.height);
const filteredImageData = aiSoulmateSketchFilter(imageData);

ctx.putImageData(filteredImageData, 0, 0);

const buffer = canvas.toBuffer('image/png');
fs.writeFileSync(outputImagePath, buffer);
console.log(`Sketch filter applied. Output saved to: ${outputImagePath}`);

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

// Example usage: applySketchFilter('input.jpg', 'output_sketch.png');

2. Applying the Filter in a Browser Environment: html

3. Using with a Web API (Example with Express.js): javascript const express = require('express'); const aiSoulmateSketchFilter = require('ai-soulmate-sketch-filter'); const { createCanvas, loadImage } = require('canvas'); const app = express(); const port = 3000;

app.get('/sketch', async (req, res) => { try { const imageUrl = req.query.url; // Expect an image URL as a query parameter if (!imageUrl) { return res.status(400).send('Please provide an image URL.'); }

const image = await loadImage(imageUrl);
const canvas = createCanvas(image.width, image.height);
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);

const imageData = ctx.getImageData(0, 0, image.width, image.height);
const filteredImageData = aiSoulmateSketchFilter(imageData);

ctx.putImageData(filteredImageData, 0, 0);
const buffer = canvas.toBuffer('image/png');

res.writeHead(200, {
  'Content-Type': 'image/png',
  'Content-Length': buffer.length
});
res.end(buffer);

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

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

4. Using with a React Component: jsx import React, { useState, useEffect, useRef } from 'react'; import aiSoulmateSketchFilter from 'ai-soulmate-sketch-filter';

function SketchFilterComponent({ imageUrl }) { const [sketchDataUrl, setSketchDataUrl] = useState(null); const canvasRef = useRef(null);

useEffect(() => { const loadImageAndApplyFilter = async () => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const image = new Image();

  image.onload = () => {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);

    const imageData = ctx.getImageData(0, 0, image.width, image.height);
    const filteredImageData = aiSoulmateSketchFilter(imageData);

    ctx.putImageData(filteredImageData, 0, 0);
    setSketchDataUrl(canvas.toDataURL());
  };

  image.src = imageUrl;
};

loadImageAndApplyFilter();

}, [imageUrl]);

return ( <canvas ref={canvasRef} style={{ display: 'none' }} /> {sketchDataUrl && } ); }

export default SketchFilterComponent;

API Summary

The ai-soulmate-sketch-filter package exposes a single function: javascript aiSoulmateSketchFilter(imageData: ImageData): ImageData

• imageData: An ImageData object representing the image to be processed. This object contains the pixel data of the image.
• Returns: A new ImageData object with the sketch filter applied.

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/