Introduction

The system has to include a way to work on images. Although users could do that on their computer with a tool such as MS-Paint, The Gimp, or Photoshop, most people do not take the time to do that. So an image editor online is more likely to be used for multiple reasons:

• The image editor can be used to create a set of instructions to re-apply to any number of images; the Core system and themes can offer many such set of instructions by default;
• Often the only few things to be applied are resizing, flips, and rotations and it takes a longer time to upload a full tool to do that than using an online image editor;
• Doing it directly in your document allows you to make sure you get it right quickly; with an external tool, you may think the size is right and it may be off even slightly and you have to spend quite a bit more time to re-adjust the size and re-upload the image.

The following are all the various features we want to have in the core version.

Note that with HTML 5 we can do all the work on the client side as well as generate a script that we later send to the server so it can automatically reapply the changes to other images.

Editor Features

Cropping

Gives you the ability to crop part of the image. Shows a rectangle with eight control points to resize it. Once the selected area is satifactory, one can click a button to crop the image.

Resizing

Use eight control points presented on the edges of the image to resize it at will. By default the resizing keeps the image ratio to make it a lot easier for users to not lose the proper size. (Most people don't understand the subtility of using the Shift key to keep an image ratio. Intead we want to have a flag "Keep Ratio".)

Rotating

We want simple 90° rotations to the left or the right. We also want a full rotation capability to end up rotating at any angle.

Flipping

Offer horizontal and vertical flipping of the image.

Slanting

Move the top or bottom of the image to slant horizontally, move the left or right of the image to slant vertically. This is often used to give a form of 3D look to an image.

Wedging

Clear a triangle on the right and left, or top and bottom, so the resulting image looks wedged. The cleared area can either be given a color or be transparent. Being transparent can be useful to get multiple wedged images next to each others.

Shift

Shift the data by a given amount of pixels. This is like a translation, only the data going out on one side enters the other side (vertically and horizontally.) This is particularly useful to create a background tile that repeats nicely.

Contrast / Brightness / Hue

Change the colors changing the contrast, brightness, and hue of the image.

SVG offers a color matrix that we should be able to use, although it is possible to tweak each pixel one by one (but in JavaScript that's surely slow...). There is a sample code to do so:

colorMatrixFilter = function (pixels, m)
{
  var i, r, g, b, a, d = pixels.data;
  for(i = 0; i < d.length; i += 4)
  {
    r = d[i];
    g = d[i + 1];
    b = d[i + 2]; 
    a = d[i + 3];

    d[i]   = r * m[ 0] + g * m[ 1] + b * m[ 2] + a * m[ 3] + m[ 4];
    d[i+1] = r * m[ 5] + g * m[ 6] + b * m[ 7] + a * m[ 8] + m[ 9];
    d[i+2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14];
    d[i+3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19];
  }
  return pixels;
};

By default, the system wants to offer a set of default transformations. For example, we can offer an "Old Photo" filter that transform the colors to a brownish or purpleish color.

Blur

Blur the image as a whole, or just the edges.

Shadow

Add a shadow, that means make a copy of the image, make it dark gray or even black, then apply the blur algorithm and finally add the result under the existing image. We actually should keep the shadow as a separate image so that way we can let the user change the parameters further.

Adding the slant effect, we can get a "3D or Perspective effect" once applying the shadow.

Borders

Although we can use HTML and CSS to add any number of borders, it is generally much more effective to add them directly in the image. Plus, the type of borders is then not limited. For example, we could add borders that look like waves, which CSS cannot do. We can also use gradients, pictures (little hearts), make borders fuzzy, etc. and make sure it looks all proper in all browsers.

Tile (also called Grid) / Blind / Jigsaw

Add space every so many pixels. The resulting image looks tiled. The space may be a solid color or fully transparent. You can optain a blind effect by setting the vertical or horizonal space to 0 pixels.

You can also obtain a field effect (as in video field) by using 0 in horizontal space and just 1 in vertical space (and either erase or add one vertical line every other line.)

The Jigsaw effect adds a puzzle like look. In that case we draw a grid on top of the image that looks like a Jigsaw. As a starter, the size of the jigsaw cam be changed, but not the shape.

Pixelize / Mosaic

Transform each given square (user specifies the size of the square) in a single color. The result is a strongly pixelated image.

The Mosaic effect is similar to pixelizing an image, only the "pixels" are irregular (somewhat random shapes).

Corner Curl

Curl a corner of the image, giving a 3D effect that the page was curled up.

Emboss / Engrave

Compute a grayscale to add an emboss or engrave effect on the image.

Ripple

Add a wave to the image. It can be horizontal or vertical and more or less strong.

Wind

The effect changes the image so it looks like the object(s) are moving. (i.e. the blur effect behind a fast car.)

Lens Flare

Add a light effect so it looks like we had a strong sun reflection in a specific spot on the image.

Spread

Transforms the image so it looks a bit like a painting by spreading the colors around their normal location.

Canvas

Apply a filter that makes the image look like it was painted on a canvas (i.e. highlighting threads of the canvas.)

Stain

Add a staing to the image, as if ink, coffee, blood, or paint was spilled on it.

Fog

Apply a filter (another semi-transparent image) over the image. The filter can have a color. This is often used to have a cloud or fog effect in an image.

Film

Add a strip at the top and bottom so it looks like the image comes from a photographic film (As in old cameras). This would work particularly well with the Multi-Image Support.

Line Nova

Add triangles that start from the edges and go toward the center of the image. The triangles are very small and there are many all around the image. This gives a "Nova" like look to the image.

Red Eye Removal

Apply this filter over a photo to get the red eyes removed.

Multi-Image Support

Offer a way to upload multiple images to the editor and place each in various way in the canvas. Then apply various functions to each image. For example, one could wedge three images placed next to each other to create an interesting result. Each image could represent different types of products or services that your company offers.

Images that have transparency can be merged on top of others taking their transparency in account.

Apply Effect to Selection

We can offer a rectangle, the same used to crop, so as to allow people to apply an effect in that rectangle only. Then offer a few extra selection shapes such as round corners, ellipses, and triangles.

The effect apply to only the selection can be used, for example, to add a border and semi-transparent shadow within the image to highlight a specific part of the image.