tito21 / canvasfilters Goto Github PK
View Code? Open in Web Editor NEWThis project forked from kig/canvasfilters
Canvas image filters
Home Page: http://fhtr.org/canvasfilters
This project forked from kig/canvasfilters
Canvas image filters
Home Page: http://fhtr.org/canvasfilters
Canvas filters -------------- This library implements a few image processing filters using the canvas element. The filters operate on ImageData objects. The filters do not modify the source ImageData. Based on http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ Smoke tests online at http://fhtr.org/canvasfilters/ LICENSE ------- MIT API Documentation ----------------- Filters : { // // Convenience functions // // filterImage applies a filter function to an image or canvas element. // Arguments from the third onwards are passed as extra arguments to the filter function. ImageData filterImage(Function filter, Image_or_Canvas image, Filter_arguments var_args, ...) // getPixels returns the ImageData object for an image or a canvas element. ImageData getPixels(Image_or_Canvas img) // toCanvas returns a new canvas filled with the given ImageData object. Canvas toCanvas(ImageData pixels) // getCanvas creates a canvas of the wanted dimensions Canvas getCanvas(int width, int height) // createImageData creates an ImageData object of the wanted dimensions ImageData createImageData(int width, int height) // createImageData creates an ImageData-like object backed by a Float32Array // of the wanted dimensions ImageDataFloat32 createImageDataFloat32(int width, int height) // bilinearSample bilinearly samples the image at the given coordinates. // The result is computed by linear blending of the four pixels around x,y. [r,g,b,a] bilinearSample(ImageData pixels, float x, float y) // // Distort filters // // identity returns a copy of the ImageData ImageData identity(ImageData pixels) // horizontalFlip flips the image left-right ImageData horizontalFlip(ImageData pixels) // verticalFlip flips the image upside down ImageData verticalFlip(ImageData pixels) // distortSine distorts the image by pinching / punching it by the given amount. // The distort amounts should be between -0.5 and 0.5. ImageData distortSine(ImageData pixels, float xAmount, float yAmount) // // Color filters // // luminance converts the image to grayscale using the CIE luminance // (0.2126*r + 0.7152*g + 0.0722*b) ImageData luminance(ImageData pixels) // grayscale converts the image to grayscale using // (0.3*r + 0.59*g + 0.11*b) ImageData grayscale(ImageData pixels) // grayscaleAvg converts the image to grayscale using // (r+g+b) / 3 ImageData grayscaleAvg(ImageData pixels) // threshold converts the image to a two-color image with // pixels brighter than or equal to the threshold value rendered white and // pixels darker than the threshold rendered black // The filter uses grayscale to compute the value of a pixel. // (0.3*r + 0.59*g + 0.11*b) ImageData threshold(ImageData pixels, int threshold) // invert inverts the RGB channels of the image. // The inverted version of a pixel is [255-r, 255-g, 255-b, a] ImageData invert(ImageData pixels) // invert inverts the RGB channels of the image. // The inverted version of a pixel is [255-r, 255-g, 255-b, a] ImageData invert(ImageData pixels) // brightnessContrast adjusts the brightness and contrast of the image. // The brightness value ranges between -1 .. 1, with 0 being neutral. // The contrast value ranges between 0 .. 127, with 1 being neutral. ImageData brightnessContrast(ImageData pixels, float brightness, float contrast) // applyLUT applies a color lookup table to the image. // The lookup table is an object of form // {r:Uint8[256], g:Uint8[256], b:Uint8[256], a:Uint8[256]} // Result pixel values are calculated by looking up the current value from // the corresponding lookup table: [lut.r[r], lut.g[g], lut.b[b], lut.a[a]] ImageData applyLUT(ImageData pixels, LookUpTable lut) // // Convolution filters // // convolve convolves the image using the weights array as a square // row-major convolution matrix. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageData convolve(ImageData pixels, Array weights, bool opaque) // horizontalConvolve convolves the image using a horizontal weights vector. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageData horizontalConvolve(ImageData pixels, Array weights, bool opaque) // verticalConvolve convolves the image using a vertical weights vector. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageData verticalConvolve(ImageData pixels, Array weights, bool opaque) // separableConvolve convolves the image using vertically and horizontally // using the supplied vectors. Faster than convolve for separable kernels. ImageData separableConvolve(ImageData pixels, Array horizWeights, Array vertWeights, bool opaque) // convolveFloat32 is a version of convolve that operates on ImageData-like // objects with a Float32Array storing the pixels // {width:int, height:int, data:Float32Array}. // Useful when you need a high value range or negative values in pixels. ImageDataFloat32 convolveFloat32(ImageData pixels, Array weights, bool opaque) // horizontalConvolveFloat32 convolves the image using a horizontal weights // vector. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageDataFloat32 horizontalConvolveFloat32(ImageData pixels, Array weights, bool opaque) // verticalConvolveFloat32 convolves the image using a vertical weights // vector. // Returns a ImageDataFloat32. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageDataFloat32 verticalConvolveFloat32(ImageData pixels, Array weights, bool opaque) // separableConvolveFloat32 convolves the image using vertically and // horizontally using the supplied vectors. Faster than convolve for separable // kernels. // Returns a ImageDataFloat32. // If the opaque argument is set to true the result image will have // an opaque alpha channel. ImageDataFloat32 separableConvolveFloat32(ImageData pixels, Array horizWeights, Array vertWeights, bool opaque) // // Pre-defined convolution filters // // gaussianBlur applies a gaussian blur kernel of the wanted diameter on the image. ImageData gaussianBlur(ImageData pixels, float diameter) // laplace applies a Laplace edge detection kernel on the image. ImageData laplace(ImageData pixels) // sobel applies a Sobel filter on the image. // This filter is purely for looks, the red channel encodes absolute vertical // gradient and the green channel absolute horizontal gradient. ImageData sobel(ImageData pixels) // sobelVectors computes the signed horizontal and vertical gradients of the image // and returns the array of resulting 2-vectors, packed tightly into a Float32Array Float32Vec2ImageData sobelVectors(ImageData pixels) // sobelVerticalGradient computes the signed vertical gradient of the image ImageDataFloat32 sobelVerticalGradient(ImageData pixels) // sobelHorizontalGradient computes the signed horizontal gradient of the image ImageDataFloat32 sobelHorizontalGradient(ImageData pixels) // // Blend operations // // darkenBlend blends b on top of a, replacing a with b whenever b is darker. // The filter operates on a per-channel basis, the result pixels // are computed as [min(a.r, b.r), min(a.g, b.g), min(a.b, b.b), alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData darkenBlend(ImageData a, ImageData b) // lightenBlend blends b on top of a, replacing a with b whenever b is lighter. // The filter operates on a per-channel basis, the result pixels // are computed as [max(a.r, b.r), max(a.g, b.g), max(a.b, b.b), alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData lightenBlend(ImageData a, ImageData b) // addBlend blends b on top of a, adding b's values to a. // [a.r+b.r, a.g+b.g, a.b+b.b, alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData addBlend(ImageData a, ImageData b) // subBlend blends b on top of a, subtracting b's values to a. // [a.r-(255-b.r), a.g-(255-b.g), a.b-(255-b.b), alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData subBlend(ImageData a, ImageData b) // multiplyBlend blends b on top of a, multiplying b with a. // [a.r*b.r/255, a.g*b.g/255, a.b*b.b/255, alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData multiplyBlend(ImageData a, ImageData b) // screenBlend blends b on top of a with the screen blend mode. // Makes a brighter by an amount determined by b. // [255 - (255 - b.c)*(255 - a.c)/255, ..., alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData screenBlend(ImageData a, ImageData b) // differenceBlend blends b on top of a by taking the absolute difference // between the images. // [Math.abs(a.c-b.c), alpha(a.a, b.a)] // where alpha(a, b) = a + (255-a)*b/255. ImageData differenceBlend(ImageData a, ImageData b) }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.