javascriptgraphicalmanipulator v1.0.0

javascriptGraphicalManipulator

javascriptGraphicalManipulator is a JavaScript library designed for advanced image manipulation using pixel grids. It offers functions for resizing, cropping, flipping, and color adjustments such as black-and-white conversion. This library is ideal for developers working with custom image processing workflows in web environments.

Features

• Image Manipulation

  • Resize and crop images.

  • Flip images horizontally or vertically.

• Color Transformations

  • Convert images to black and white.

  • Isolate or remove specific colors.

• I/O Operations

  • Convert images to pixel grids and vice versa.

  • Display and manipulate images directly on the web interface.

Installation

You can install javascriptGraphicalManipulator via npm: npm install javascriptGraphicalManipulator

Once installed, you can require or import it in your JavaScript files:

const { imageToPixelGrid, bnw, resizeImage, singleColorPop } = require('javascriptGraphicalManipulator');

Or, if you're using ES6 modules:

import { imageToPixelGrid, bnw, resizeImage, singleColorPop} from 'javascriptGraphicalManipulator';

Quick Start

Here’s how to get started with javascriptGraphicalManipulator:

1. Upload an image:

<input type="file" id="imageUpload" accept="image/*">

2. Manipulate the image:

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    // You can manipulate the image after it's loaded using the functions below
});

3. Apply a transformation:

function applyBlackAndWhite() {
    // Assuming image is loaded on canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    for (let i = 0; i < imageData.data.length; i += 4) {
        const avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
        imageData.data[i] = avg;
        imageData.data[i + 1] = avg;
        imageData.data[i + 2] = avg;
    }
    
    ctx.putImageData(imageData, 0, 0);
}

4. Display the image:

const dataURL = canvas.toDataURL();
const img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);

Available Methods

Image Manipulation

• imageToPixelGrid(imagePath, outputToTextFile=False, textFile=None)

• pixelGridToImage(pixelGrid, outputImagePath)

• resizeImage(pixelGrid, length, width)

• cropImage(pixelGrid, top, left, right, bottom)

• flipHoriz(pixelGrid)

• flipVert(pixelGrid)

Color Transformations

• bnw(pixelGrid)

• singleColorPop(pixelGrid, r, g, b, threshold=50)

• singleColorRemove(pixelGrid, r, g, b, threshold=50)

• changeColor(pixelGrid, r1, g1, b1, r2, g2, b2, threshold=0)

Adjustments

• adjustBrightness(pixelGrid, factor)

• adjustShadowIntensity(pixelGrid, factor)

• adjustBlackPoint(pixelGrid, level)

• adjustWarmth(pixelGrid, factor)

Tests

The tests folder includes unit tests to validate the functionality of the library. To run the tests in a browser environment, you can use testing frameworks such as Mocha or Jasmine.

Contributing

Contributions are welcome! Please fork this repository and submit a pull request for any bug fixes or enhancements.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Developed by Dharyansh Achlas For any queries, feel free to contact https://github.com/salchaD-27