web-image-editor

This is a web image editor, which is implemented by Vue3. Demo

English ｜繁體中文

---

Snapshot

---

Feature

• Navbar
  • New project: Create new project
  • Open project: Open project from local
  • Save project: Save project to local
  • Open image: Open image from local
  • Save image: Save image to local
  • Undo(ctrl+z) and redo(ctrl+y): Undo and redo action
• Tools
  • Brush tool: Draw on canvas
    • Brush size: Change brush size
    • Brush color: Change brush color
  • Paint bucket: Fill color on canvas
    • Paint bucket color: Change paint bucket color
  • Seal: Stamp on canvas
    • Seal size: Change seal size
    • Seal image: Upload seal image and select it
  • Selection tool: Select area on canvas, then you can ctrl+j to copy and paste it to new layer
  • Cursor tool: Select object on canvas, then you can move, resize and rotate it
• Filter
  • Grayscale: Convert selected area to grayscale
  • Invert: Convert selected area to invert
  • Blur: Blur selected area
  • Oil paint: Apply oil paint filter to selected area
  • Black and white: Convert selected area to black and white
• Layer
  • Add layer: Add new layer
  • Delete layer: Delete layer
  • Order layer: Change layer order by drag and drop
• Other
  • Zoom: Hold alt and scroll mouse wheel to zoom canvas
  • Drag: Hold space and left click to drag canvas

---

Note

• If you drag the object out of the canvas, it will be deleted. You can use undo(ctrl+z) to undo it.
• Erase tool is not implemented, but you can use brush tool with the background color to erase objects.
• Operations may cause image distortion.