https://github.com/jesperkha/figureslice

Web app for cutting out portions of images with shapes.
https://github.com/jesperkha/figureslice

drawing editor go image-manipulation javascript tool website

Last synced: 3 days ago
JSON representation

Web app for cutting out portions of images with shapes.

• Host: GitHub
• URL: https://github.com/jesperkha/figureslice
• Owner: jesperkha
• License: mit
• Created: 2021-08-10T12:59:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-02T18:30:22.000Z (over 1 year ago)
• Last Synced: 2024-11-08T17:16:24.634Z (about 2 months ago)
• Topics: drawing, editor, go, image-manipulation, javascript, tool, website
• Language: Go
• Homepage: https://figureslice.herokuapp.com
• Size: 1.67 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **FigureSlice**

[Go to the website](https://figureslice.herokuapp.com)




## **About**

Figure Slice is a web tool for clipping images with various shapes. The in-browser editor lets you create shapes that go over your image and act as a mask. When the image is processed you will only get the parts of the image that are seen through the shapes drawn. Changing the opacity of each shape is also possible.












## **How to use**

The website has clear and concise instructions when it comes to actually using the editor.

If something is unclear or you find a bug that is not listed below, please feel free to create an issue.







## **How it works**

The editor is made with plain javascript and DOM manipulation. The shapes drawn are just divs with a displaced background image relative to the source image. When done, the shapes positions and sizes are scaled to match the dimensions of the source image.

The code for the image editing process is found in the [img directory](https://github.com/jesperkha/FigureSlice/tree/main/img). The shapes sent from the editor are drawn to a blank image buffer and that buffer is used as a mask when drawing the new image with the standard Go image/draw library.