https://github.com/kylefox/image-processing

Experimental image processing library in JavaScript.
https://github.com/kylefox/image-processing

Last synced: over 1 year ago
JSON representation

Experimental image processing library in JavaScript.

• Host: GitHub
• URL: https://github.com/kylefox/image-processing
• Owner: kylefox
• Created: 2012-01-21T21:22:23.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-01-21T21:36:03.000Z (over 14 years ago)
• Last Synced: 2025-02-09T21:31:50.939Z (over 1 year ago)
• Language: CoffeeScript
• Homepage:
• Size: 621 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
This is a scratch pad for a JavaScript library (written in CoffeeScript) for processing images. Adjustments are applied to `` tags by replacing the image with a ``.

  

Example:

========

Assuming your markup contains `` you could do something like this:

    image = new img.Image( document.getElementById('image') );

    image.setSaturation(.5);

    image.draw()

    

Creating actions

================

Create a custom action by subclassing `img.actions.Action` and overriding either the `adjustPixel` or `apply` methods.

Adjusting a single pixel

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

Overwrite `adjustPixel` if your algorithm simply applies a calculation to a single pixel (for example, greyscale):

    class Greyscale extends img.actions.Action

    

      # Parameters: the red, green, blue, and alpha values of the source pixel.

      # Returns: the new (adjusted) values for the pixel.

      applyToPixel: (r, g, b, a) ->

        v = r*0.3 + g*0.59 + b*0.11

        [v, v, v, 255]

        

Complex actions

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

If your action cannot be applied per-pixel (for example, the new value for a pixel depends on the values of its neighbouring pixels) you can override the `apply` method to process the image data however you want:

    class Mosaic extends img.actions.Action

    

      # Parameter: the ImageData of the source image (array of pixel values).

      # Returns: the new (adjusted) array of pixel values.

      apply: (imageData) =>

        # Your crazy processing goes here...

        return imageData

    

The code is mostly experimental, but you might find some useful utilities hidden inside. Feel free to fork & add new stuff, or to repurpose however you see fit.