### Crop Images with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Provides an example of cropping a rectangular region from an image using ImageScript, specifying the starting coordinates and dimensions of the crop area.

```javascript
const { Image } = require('imagescript');

(async () => {
    const image = new Image(512, 512);
    image.fill((x, y) => Image.hslToColor((x + y) / (image.width + image.height), 1, 0.5));

    // Crop to 128x128 starting at (128, 128)
    image.crop(128, 128, 128, 128);

    const encoded = await image.encode();
    require('fs').writeFileSync('./cropped.png', encoded);
})();
```

--------------------------------

### ImageScript Color Utilities: Conversions and Gradients

Source: https://context7.com/matmen/imagescript/llms.txt

Showcases ImageScript's color utility functions for converting between different color formats (RGB, RGBA, HSL, HSLA) and generating gradient colors. It includes examples of converting to and from color formats, and creating a gradient function.

```javascript
const { Image } = require('imagescript');

// RGB to color (0xRRGGBBAA format)
const red = Image.rgbToColor(255, 0, 0);
const blue = Image.rgbaToColor(0, 0, 255, 128); // Semi-transparent

// HSL to color
const cyan = Image.hslToColor(180, 1, 0.5);
const orange = Image.hslaToColor(30, 1, 0.5, 1);

// Color to RGB/RGBA
const [r, g, b, a] = Image.colorToRGBA(0xff8800ff);
const [r2, g2, b2] = Image.colorToRGB(0xff8800ff);

// RGB to HSLA
const [h, s, l, a2] = Image.rgbaToHSLA(255, 136, 0, 255);
console.log(`Hue: ${h}, Saturation: ${s}, Lightness: ${l}`);

// Create gradient function
const gradient = Image.gradient({
    0: 0xff0000ff,    // Red at start
    0.5: 0xffff00ff,  // Yellow at middle
    1: 0x00ff00ff     // Green at end
});

const canvas = new Image(256, 100);
canvas.fill(x => gradient(x / canvas.width));
```

--------------------------------

### ImageScript Pixel Manipulation: Access and Iteration

Source: https://context7.com/matmen/imagescript/llms.txt

Explains how to perform direct pixel-level manipulation on images using ImageScript. This includes setting individual pixels, getting pixel color values, retrieving RGBA components, and iterating over all pixels with their corresponding colors.

```javascript
const { Image } = require('imagescript');

const image = new Image(256, 256);

// Set individual pixels
for (let x = 0; x < image.width; x++) {
    for (let y = 0; y < image.height; y++) {
        const color = Image.hslToColor(x / image.width, y / image.height, 0.5);
        image.setPixelAt(x, y, color);
    }
}

// Get pixel value
const pixelColor = image.getPixelAt(128, 128);
console.log(`Pixel at (128, 128): 0x${pixelColor.toString(16)}`);

// Get RGBA values
const rgba = image.getRGBAAt(128, 128);
console.log(`RGBA: [${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]}]`);

// Iterate over all pixels with colors
for (const [x, y, color] of image.iterateWithColors()) {
    if (x < 10 && y < 10) {
        console.log(`Pixel (${x}, ${y}): 0x${color.toString(16)}`);
    }
}
```

--------------------------------

### Draw Shapes on Images with Imagescript

Source: https://context7.com/matmen/imagescript/llms.txt

Provides examples of drawing basic shapes like filled rectangles and circles directly onto an image canvas using the imagescript library. It supports solid colors and color functions for gradient effects. Requires 'imagescript' and 'fs'.

```javascript
const { Image } = require('imagescript');

(async () => {
    const canvas = new Image(500, 500);
    canvas.fill(0xffffffff); // White background

    // Draw filled rectangle
    canvas.drawBox(50, 50, 200, 100, 0xff0000ff); // Red box

    // Draw with color function for gradients
    canvas.drawBox(50, 200, 200, 100, (x, y) => {
        return Image.hslToColor(x / canvas.width, 1, 0.5);
    });

    // Draw circle
    canvas.drawCircle(400, 400, 75, 0x0000ffff); // Blue circle

    await require('fs').promises.writeFile('./shapes.png', await canvas.encode());
})();
```

--------------------------------

### Resize Images Using ImageScript API

Source: https://context7.com/matmen/imagescript/llms.txt

Demonstrates various image resizing methods provided by ImageScript, including exact dimensions, aspect ratio preservation, scaling by factor, fitting, covering, and containing within bounding boxes.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const binary = await fs.readFile('./photo.jpg');
    const image = await Image.decode(binary);

    // Resize to exact dimensions
    image.resize(800, 600);

    // Preserve aspect ratio (auto-calculate height)
    const img2 = await Image.decode(binary);
    img2.resize(800, Image.RESIZE_AUTO);

    // Scale by factor (200% size)
    const img3 = await Image.decode(binary);
    img3.scale(2.0);

    // Fit within bounding box (centers image)
    const img4 = await Image.decode(binary);
    img4.fit(400, 400);

    // Cover bounding box (crops overflow)
    const img5 = await Image.decode(binary);
    img5.cover(400, 400);

    // Contain within bounding box (may be smaller)
    const img6 = await Image.decode(binary);
    img6.contain(400, 400);
})();
```

--------------------------------

### Manipulate Image Colors with Imagescript

Source: https://context7.com/matmen/imagescript/llms.txt

Illustrates various color manipulation techniques including inversion, hue shifting, saturation adjustment, lightness modification, channel operations, and opacity changes using the imagescript library. It requires 'imagescript' and 'fs' for image loading and saving.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const binary = await fs.readFile('./photo.jpg');

    // Invert all colors
    const inverted = await Image.decode(binary);
    inverted.invert();

    // Shift hue by degrees
    const hueShifted = await Image.decode(binary);
    hueShifted.hueShift(180);

    // Adjust saturation (0-1 scale, false = relative)
    const desaturated = await Image.decode(binary);
    desaturated.saturation(0.5, false);

    // Adjust lightness
    const brighter = await Image.decode(binary);
    brighter.lightness(1.2, false);

    // Adjust individual color channels (0-1)
    const redOnly = await Image.decode(binary);
    redOnly.green(0, true).blue(0, true);

    // Adjust opacity
    const transparent = await Image.decode(binary);
    transparent.opacity(0.5);

    await fs.writeFile('./inverted.png', await inverted.encode());
})();
```

--------------------------------

### Create and Draw Circles with Imagescript

Source: https://context7.com/matmen/imagescript/llms.txt

Demonstrates how to create circular images by cropping, generate circular backgrounds with gradients, and draw circles on an image using the imagescript library. It requires 'imagescript' and 'fs' modules for image processing and file operations.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const avatarBinary = await fs.readFile('./avatar.png');
    const avatar = await Image.decode(avatarBinary);

    // Crop image into a circle
    avatar.resize(200, 200).cropCircle();

    // Create circular background
    const background = new Image(216, 216);
    const gradient = Image.gradient({ 0: 0x00ffffff, 1: 0x0080ffff });
    background.fill((x, y) => gradient((x + y) / (background.width + background.height)));
    background.cropCircle();

    // Draw a circle on an image
    const canvas = new Image(400, 400);
    canvas.fill(0xffffffff);
    canvas.drawCircle(200, 200, 100, 0xff0000ff);

    await fs.writeFile('./circular_avatar.png', await avatar.encode());
})();
```

--------------------------------

### Encode Images to Various Formats with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Illustrates how to export images to PNG, JPEG, and WEBP formats using ImageScript, with options for compression level, quality, and metadata.

```javascript
const { Image } = require('imagescript');

(async () => {
    const image = new Image(256, 256);
    image.fill(0x00ff00ff); // Green background

    // Encode as PNG with compression level (0-9)
    const pngData = await image.encode(9, {
        title: 'My Image',
        author: 'John Doe',
        creationTime: new Date(),
        description: 'Generated image'
    });

    // Encode as JPEG with quality (1-100)
    const jpegData = await image.encodeJPEG(90);

    // Encode as WEBP (null = lossless, 0-100 = quality)
    const webpLossless = await image.encodeWEBP(null);
    const webpLossy = await image.encodeWEBP(80);

    require('fs').writeFileSync('./output.png', pngData);
    require('fs').writeFileSync('./output.jpg', jpegData);
    require('fs').writeFileSync('./output.webp', webpLossless);
})();
```

--------------------------------

### Render Text on Images with Imagescript

Source: https://context7.com/matmen/imagescript/llms.txt

Demonstrates how to render text onto images using TrueType or OpenType fonts with the imagescript library. It covers rendering simple text and text with advanced layout options like word wrapping and alignment. Requires 'imagescript', 'TextLayout', and 'fs'.

```javascript
const { Image, TextLayout } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const canvas = new Image(1000, 500);
    canvas.fill(0x2c2f33ff);

    // Load font
    const font = await fs.readFile('./fonts/arial.ttf');

    // Render simple text
    const username = await Image.renderText(
        font,
        64,              // scale
        'Hello World',   // text
        0xffffffff       // white color
    );
    canvas.composite(username, 50, 50);

    // Render with layout options
    const layout = new TextLayout({
        maxWidth: 800,
        maxHeight: 400,
        wrapStyle: 'word',
        verticalAlign: 'center',
        horizontalAlign: 'middle',
        wrapHardBreaks: true
    });

    const paragraph = await Image.renderText(
        font,
        32,
        'This is a long text that will wrap according to the layout settings.',
        0xd0d0d0ff,
        layout
    );
    canvas.composite(paragraph, 50, 150);

    await fs.writeFile('./text.png', await canvas.encode());
})();
```

--------------------------------

### Decode and Manipulate Images with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Shows how to load and decode existing images from binary data (PNG, JPEG, TIFF, GIF) using ImageScript. Includes accessing pixel data, resizing, and saving the manipulated image.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    // Decode a PNG/JPEG/TIFF image
    const binary = await fs.readFile('./avatar.png');
    const image = await Image.decode(binary);

    console.log(`Image dimensions: ${image.width}x${image.height}`);

    // Access pixel data
    const pixel = image.getPixelAt(10, 10);
    const [r, g, b, a] = Image.colorToRGBA(pixel);
    console.log(`Pixel color: R=${r}, G=${g}, B=${b}, A=${a}`);

    // Manipulate and save
    image.resize(200, 200);
    const encoded = await image.encode();
    await fs.writeFile('./avatar_resized.png', encoded);
})();
```

--------------------------------

### Create Blank Image Canvas with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Demonstrates how to create a blank image canvas with specified dimensions using ImageScript. Supports filling with solid colors or gradients defined by color functions.

```javascript
const { Image } = require('imagescript');

// Create a 1000x700 pixel image
const image = new Image(1000, 700);

// Fill with a solid color (RGBA format: 0xRRGGBBAA)
image.fill(0xff0000ff); // Red with full opacity

// Fill with a gradient using a color function
const gradient = Image.gradient({ 0: 0x00ffffff, 1: 0x0080ffff });
image.fill((x, y) => gradient((x + y) / (image.width + image.height)));

// Create HSL color
const colorImage = new Image(128, 128);
colorImage.fill(x => Image.hslToColor(x / colorImage.width, 1, 0.5));
```

--------------------------------

### GIF Animation Manipulation with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Create and manipulate animated GIFs. Supports creating GIFs from frames, decoding existing GIFs, resizing frames, and creating frames from static images. Requires 'imagescript' and 'fs'.

```javascript
const { Frame, GIF, Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    // Create animated GIF from frames
    const frames = [];
    for (let i = 0; i < 30; i++) {
        const frame = new Frame(256, 256, 100); // width, height, duration(ms)
        frame.fill(x => Frame.hslToColor(x / frame.width + i / 30, 1, 0.5));
        frames.push(frame);
    }

    const gif = new GIF(frames, -1); // -1 = loop forever
    const encoded = await gif.encode(95); // quality 0-100
    await fs.writeFile('./animation.gif', encoded);

    // Decode existing GIF
    const binary = await fs.readFile('./animation.gif');
    const decoded = await GIF.decode(binary);
    console.log(`GIF: ${decoded.width}x${decoded.height}, ${decoded.length} frames, ${decoded.duration}ms`);

    // Extract first frame only
    const firstFrame = await GIF.decode(binary, true);

    // Resize all frames
    decoded.resize(128, 128);

    // Create frame from existing image
    const staticImage = new Image(100, 100);
    staticImage.fill(0xff0000ff);
    const frameFromImage = Frame.from(staticImage, 500); // 500ms duration
})();
```

--------------------------------

### Apply Advanced Image Effects with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Demonstrates how to apply special effects like rounded corners and fisheye distortion to images using the ImageScript library. It covers both custom and default radius/effect applications and involves reading an image, applying effects, and saving the modified image.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const binary = await fs.readFile('./photo.jpg');

    // Round corners with custom radius
    const rounded = await Image.decode(binary);
    rounded.roundCorners(32);

    // Round corners with default radius (min(width, height) / 4)
    const roundedDefault = await Image.decode(binary);
    roundedDefault.roundCorners();

    // Apply fisheye effect
    const fisheye = await Image.decode(binary);
    fisheye.fisheye(2);

    // Apply default fisheye
    const fisheyeDefault = await Image.decode(binary);
    fisheyeDefault.fisheye();

    await fs.writeFile('./rounded.png', await rounded.encode());
    await fs.writeFile('./fisheye.png', await fisheye.encode());
})();
```

--------------------------------

### Composite Images with Imagescript

Source: https://context7.com/matmen/imagescript/llms.txt

Shows how to overlay multiple images onto a base canvas with automatic alpha blending using the imagescript library. It involves decoding images, resizing, cropping to circles, and compositing at specified coordinates. Requires 'imagescript' and 'fs'.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    // Create base image
    const canvas = new Image(1000, 700);
    canvas.fill(0x2c2f33ff);

    // Load and composite avatar
    const avatarBinary = await fs.readFile('./avatar.png');
    const avatar = await Image.decode(avatarBinary);
    avatar.resize(200, 200).cropCircle();

    // Composite at specific position (x, y)
    canvas.composite(avatar, 50, 50);

    // Add multiple overlays
    const badge = await Image.decode(await fs.readFile('./badge.png'));
    canvas.composite(badge, 220, 220);

    // Create pattern by compositing repeatedly
    const pattern = new Image(50, 50);
    pattern.fill(0xff00ff80); // Semi-transparent magenta
    for (let x = 0; x < canvas.width; x += pattern.width) {
        for (let y = 0; y < canvas.height; y += pattern.height) {
            canvas.composite(pattern, x, y);
        }
    }

    await fs.writeFile('./composite.png', await canvas.encode());
})();
```

--------------------------------

### Image Transformations with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Perform rotation and flipping operations on images using ImageScript. Supports rotation with or without canvas resizing and horizontal/vertical flips. Requires 'imagescript' and 'fs'.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const binary = await fs.readFile('./photo.jpg');

    // Rotate by degrees (resize to fit all pixels)
    const rotated = await Image.decode(binary);
    rotated.rotate(45, true);

    // Rotate without resizing (crops overflow)
    const rotatedCrop = await Image.decode(binary);
    rotatedCrop.rotate(45, false);

    // Flip horizontally
    const flippedH = await Image.decode(binary);
    flippedH.flip('horizontal');

    // Flip vertically
    const flippedV = await Image.decode(binary);
    flippedV.flip('vertical');

    await fs.writeFile('./rotated.png', await rotated.encode());
    await fs.writeFile('./flipped.png', await flippedH.encode());
})();
```

--------------------------------

### Image Color Analysis with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Extract color information from images, including average and dominant colors. Can optionally ignore black and white when determining dominant colors. Requires 'imagescript' and 'fs'.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const binary = await fs.readFile('./photo.jpg');
    const image = await Image.decode(binary);

    // Get average color
    const avgColor = image.averageColor();
    const [r, g, b, a] = Image.colorToRGBA(avgColor);
    console.log(`Average color: rgba(${r}, ${g}, ${b}, ${a})`);

    // Get dominant color (ignoring black/white)
    const domColor = image.dominantColor(true, true, 15);
    const [dr, dg, db, da] = Image.colorToRGBA(domColor);
    console.log(`Dominant color: rgba(${dr}, ${dg}, ${db}, ${da})`);

    // Get dominant color including black/white
    const domColorAll = image.dominantColor(false, false);

    // Create swatch of dominant color
    const swatch = new Image(100, 100);
    swatch.fill(domColor);
    await fs.writeFile('./dominant_color.png', await swatch.encode());
})();
```

--------------------------------

### Render SVG to Raster Images with ImageScript

Source: https://context7.com/matmen/imagescript/llms.txt

Convert SVG graphics into raster images. Supports automatic sizing, scaling by width, height, or a scale factor. Requires the 'imagescript' and 'fs' modules.

```javascript
const { Image } = require('imagescript');
const fs = require('fs').promises;

(async () => {
    const canvas = new Image(1000, 700);
    canvas.fill(0xffffffff);

    // Load SVG
    const svgContent = await fs.readFile('./icon.svg', 'utf-8');

    // Render with automatic sizing
    const icon1 = await Image.renderSVG(svgContent);
    canvas.composite(icon1, 50, 50);

    // Scale to specific width
    const icon2 = await Image.renderSVG(svgContent, 64, Image.SVG_MODE_WIDTH);
    canvas.composite(icon2, 200, 50);

    // Scale to specific height
    const icon3 = await Image.renderSVG(svgContent, 64, Image.SVG_MODE_HEIGHT);
    canvas.composite(icon3, 350, 50);

    // Scale by factor
    const icon4 = await Image.renderSVG(svgContent, 2.0, Image.SVG_MODE_SCALE);
    canvas.composite(icon4, 500, 50);

    await fs.writeFile('./svg_render.png', await canvas.encode());
})();
```

--------------------------------

### Encode RGBA to PNG using ImageScript Codecs

Source: https://github.com/matmen/imagescript/blob/master/codecs/readme.md

This snippet demonstrates how to encode an RGBA image buffer into PNG format using the `@imagescript/codecs` library. It requires the `png` codec to be imported and takes a `Uint32Array` representing RGBA data along with image dimensions as input.

```javascript
import { png } from '@imagescript/codecs';

const rgba = new Uint32Array(256 * 256);
// Assume rgba is populated with image data here
const image = png.encode(rgba, { width: 256, height: 256 });
console.log('Encoded PNG image:', image);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.