Image Manipulation


All the image manipulations can only happen on a static canvas. All the operations are performed on the top most canvas. Few options of blend canvas use top two canvas layers. You would need image selection tool        to select relevant sections of image to apply adjustment.

Adjust

Brightness/ Contrast

This action allows you to adjust the brightness and contrast of the image. It takes three parameters, one for brightness, one for contrast and one for selecting "legacy" brightness mode.

If the legacy mode is selected, the brightness is adjusted the same way Photoshop did it prior to CS3, that is simply add the value to the pixel, effectively shifting the histogram. Otherwise, each pixel is multiplied with the factor (brightness_value / 150), creating an effect more like the Lighten action.

Hue/Saturation/Lightness

This action allows adjustment of hue, saturation and lightness.

Color Balance

This action shifts the red, green and blue channels of the image by an amount specified by you.

Remove Noise

This action tries to remove noise from the image. For each pixel, it looks at its neighboring pixels and if the pixel value is either higher or lower than all of its neighbors, it is assigned the maximum or minimum neighboring value. The Noise action is used in the demo below to add noise to image, which you can then remove (some of) using this action. It works best for getting rid of single pixels that stand out.

Desaturate

This action converts the image to grayscale. It has the option of either taking the average value of the RGB triplet, ie. (R+G+B)/3, or use the more common conversion method of mixing 30% red, 59% green and 11% blue to get a brightness value closer to what the human eye perceives. It defaults to using the latter method. The average method is only supported by Canvas enabled browsers, IE always uses the aforementioned conversion.

Invert/Invert Alpha

This action simply inverts the colors of the image. Ie. if a pixel has an RGB value of (100,50,34), its new value becomes (255-100, 255-50, 255-34) = (155, 205, 221).

Posterize

This action reduces the number of colors to a specified number of levels, creating a posterize effect.

Threshold


Sepia

This acts like the desaturation action, but instead of a regular grayscale it adds a tinting to create an effect similar to sepia toning. An alternative mode is available which is a bit faster but arguably doesn't produce as good a result as the default mode.

Sharpen

This action applies a 3x3 sharpen kernel on the image, sharpening it a bit. The strength of the sharpening effect can be controlled with the amount parameter. See also the Unsharp Mask action.

Solarize

Applies a solarize effect to the image.

Filter


Blend

This action lets you blend two images using different blend modes like the ones available in Photoshop (multiply, screen, exclusion, difference, etc.). You can use either an img element or a canvas element for the "blend image". It expects the images to be the same size but will simply crop the blend image if it's too large or leave untouched areas if it's smaller then the base image.

Blur

This action applies a 3x3 blur kernel on the image, softening it a bit. For a faster and more powerful blur effect, see the Blur Fastaction.

Blur Fast

A faster blur with variable strength. Rather than do a per-pixel manipulation like the regular Blur action, this one achieves a blur-like effect by rescaling the image a small amount over and over again.

Edges

An edge detection filter. This action performs a simple edge detection on the image. You can also choose to have the image converted to greyscale and/or inverted.

Emboss

This creates a simple emboss effect. It is possible vary the brightness of the image and select the direction of the light from a predefined list (top left, top, top right, etc..).

Glow

This action creates a glowing effect by creating a blurred copy of the image and then adding this copy to the original image.

Lighten

This action lightens or darkens the image.

Mossaic

This action applies a mosaic effect on the image, creating a pixelated look.

Pointillize

This action paints the picture with circular points. Processing time increases drastically with small radii and/or high densities.

Threshold

Sobel


This is the official blog for paint doodler app
Online painting,drawing and image editing platform for Chrome Browser Version 26.0+. paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.

No comments:

Post a Comment