Using HTML5 technology to realize the processing of graphics image on the Web--webphotoshop Lite version

Webphotoshop Lite is the use of HTML5 technology on the web to achieve graphics image processing, to build easy to maintain, easy to share, easy to expand, real-time web graphics image processing platform. Lite features include: drawing, image processing, image manipulation. The full version includes multi-person collaborative operation images, real-time communication, image search, and real-time multi-person collaborative processing graphics and image technology. (full version of subsequent uploads)
First, function Description:
1. Graphic drawing
Achieve the drawing effect of pencils, brushes (calligraphy brushes, airbrush, crayons, marker pens, watercolor pens). Implements the drawing of lines, curves, ellipses (circles), rectangles (rounded rectangles), triangles (right triangle, equilateral triangle, arbitrary triangles), and polygons. During the drawing process, you can select a color and choose a color in two ways: color selection, color pickup. can be filled with color, that is, the selected area, with the selected color to fill.
2. Image processing
Can be achieved by: black and white, blur, brightness/transparency, anti-color, atomization, sharpening, relief, engraving, softening, painting, building blocks, nostalgia, masks, masks include: Red masks, blue masks, green masks.
3. Image operation
The ability to manipulate images is: Image selection, including area selection, Object selection. The image moves, that is, the movement of the selected area or object. Image clipping, including rectangle cropping (preserving the cropping area, outside the cropping area). The rotation of the image, the canvas or the selected area object to the right 90 degrees, left 90 degrees, 180 degrees, vertical rotation, horizontal rotation, any degree. Eraser effect, the ability to erase the drawn image. Zoom in and out of the image, including local scaling of the image and overall image scaling. Inserting text, that is, inserting text on an image, can change the text color, font, size, bold, italic, underline, strikethrough effect. Save the image as a picture. Save the image to the server. Save the image in a different format. The image is saved as a custom format that you can edit again next time. The ability to implement multiple layers, that is, add layers, delete layers, layer hierarchy changes.

Second, the operation process:
1) After entering the system, display the main workspace, including menu bar, Options Bar, toolbox, main artboard, history, layer management.
2) default to pencil, you can draw in the main workspace. You can select properties such as color.
3) Open the picture and edit the picture.

Main interface:

GitHub Location: https://github.com/yangtzeyufei/WebPhotoshop-Simple

Using HTML5 technology to realize the processing of graphics image on the Web--webphotoshop Lite version