diff --git a/README.md b/README.md index c228ef3..0c9f316 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,48 @@ # Contourer -Tool for creating svg contours for stickers images. +Tool for creating svg contours for images. -## Example +![](docs/assets/contourer-app.gif) -| **Original image** | **Contour with margin 0** | **Contour with margin 10** | -|-------------------------------|---------------------------------|----------------------------------| -| ![](assets/examples/phil.png) | ![](assets/examples/phil_0.svg) | ![](assets/examples/phil_10.svg) | +## Example As an original image you should use png pic with a transparent background. -## How it works - -| Get an image | Create a shade | -|-------------------------------------|-------------------------------------| -| ![](assets/how-it-works/step-0.svg) | ![](assets/how-it-works/step-1.svg) | - -| Find a contour | Extend the shade | -|-------------------------------------|-------------------------------------| -| ![](assets/how-it-works/step-2.svg) | ![](assets/how-it-works/step-3.svg) | - -| Color it black | Trace a shade | -|-------------------------------------|-------------------------------------| -| ![](assets/how-it-works/step-4.svg) | ![](assets/how-it-works/step-5.svg) | - -| Remove filling | Сombine with image | -|-------------------------------------|-------------------------------------| -| ![](assets/how-it-works/step-6.svg) | ![](assets/how-it-works/step-7.svg) | - - +## Improvements + +Fork me and feel free to ask questions, report bugs and open pull requests. Check out [developer's guide](docs/how-it-works.md). ## License diff --git a/docs/assets/contourer-app.gif b/docs/assets/contourer-app.gif new file mode 100644 index 0000000..6ca3868 Binary files /dev/null and b/docs/assets/contourer-app.gif differ diff --git a/assets/examples/phil.png b/docs/assets/examples/phil.png similarity index 100% rename from assets/examples/phil.png rename to docs/assets/examples/phil.png diff --git a/docs/assets/examples/phil.svg b/docs/assets/examples/phil.svg new file mode 100644 index 0000000..60d597e --- /dev/null +++ b/docs/assets/examples/phil.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/examples/phil_10.svg b/docs/assets/examples/phil_blue_10.svg similarity index 99% rename from assets/examples/phil_10.svg rename to docs/assets/examples/phil_blue_10.svg index 5fa8bc6..d9f91e3 100644 --- a/assets/examples/phil_10.svg +++ b/docs/assets/examples/phil_blue_10.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/assets/examples/phil_0.svg b/docs/assets/examples/phil_red_0.svg similarity index 100% rename from assets/examples/phil_0.svg rename to docs/assets/examples/phil_red_0.svg diff --git a/assets/how-it-works/step-0.svg b/docs/assets/how-it-works/step-0.svg similarity index 100% rename from assets/how-it-works/step-0.svg rename to docs/assets/how-it-works/step-0.svg diff --git a/assets/how-it-works/step-1.svg b/docs/assets/how-it-works/step-1.svg similarity index 100% rename from assets/how-it-works/step-1.svg rename to docs/assets/how-it-works/step-1.svg diff --git a/assets/how-it-works/step-2.svg b/docs/assets/how-it-works/step-2.svg similarity index 100% rename from assets/how-it-works/step-2.svg rename to docs/assets/how-it-works/step-2.svg diff --git a/assets/how-it-works/step-3.svg b/docs/assets/how-it-works/step-3.svg similarity index 100% rename from assets/how-it-works/step-3.svg rename to docs/assets/how-it-works/step-3.svg diff --git a/assets/how-it-works/step-4.svg b/docs/assets/how-it-works/step-4.svg similarity index 100% rename from assets/how-it-works/step-4.svg rename to docs/assets/how-it-works/step-4.svg diff --git a/assets/how-it-works/step-5.svg b/docs/assets/how-it-works/step-5.svg similarity index 100% rename from assets/how-it-works/step-5.svg rename to docs/assets/how-it-works/step-5.svg diff --git a/assets/how-it-works/step-6.svg b/docs/assets/how-it-works/step-6.svg similarity index 100% rename from assets/how-it-works/step-6.svg rename to docs/assets/how-it-works/step-6.svg diff --git a/assets/how-it-works/step-7.svg b/docs/assets/how-it-works/step-7.svg similarity index 100% rename from assets/how-it-works/step-7.svg rename to docs/assets/how-it-works/step-7.svg diff --git a/docs/development.md b/docs/development.md new file mode 100644 index 0000000..a6daf90 --- /dev/null +++ b/docs/development.md @@ -0,0 +1,36 @@ +# Development + +To run your local copy of Contourer for development follow these steps + +## Install + +Clone repository + +```sh +$ git clone https://github.com/stickerum/contourer +$ cd contourer +``` + +Install Node.js dependencies + +```sh +$ npm i +``` + +## Run Contourer + +To process image with Contourer pass path to this image + +```sh +$ npm start +``` + +## Pack binaries + +Create binary files to use Contourer on production by the following script. + +```sh +$ npm run pack +``` + +Binaries for Linux, macOS and Windows will be created in `build` directory. diff --git a/docs/how-it-works.md b/docs/how-it-works.md new file mode 100644 index 0000000..806267c --- /dev/null +++ b/docs/how-it-works.md @@ -0,0 +1,49 @@ +# How it works + +Step by step explanation of Contourer's work. + +## Get a source image + +![](assets/how-it-works/step-0.svg) + +## Create a shade + +Paint black each non transparent pixel + +![](assets/how-it-works/step-1.svg) + +## Find a contour + +For each black pixel we check his 8 adjacent pixels. If one of them is transparent then target pixel is on the contour of image. + +![](assets/how-it-works/step-2.svg) + +## Extend the shade + +Each contour's pixel should be «enlarged» to the margin size. We do this to create contour that places with a distance to image. + +![](assets/how-it-works/step-3.svg) + +## Color it black + +Actually we don't draw this red contour. This step is for better understanding the process. + +![](assets/how-it-works/step-4.svg) + +## Trace a shade + +Now we have a shade that should be traced. At the end of this step Potrace will return a vectorized copy of this shape. We use modified version of [node-potrace](https://github.com/stickerum/node-potrace) so we able to set up color for shape's stroke. + +![](assets/how-it-works/step-5.svg) + +## Remove filling + +Returned vectorized shape doesn't have any filling. It also was done for understanding. + +![](assets/how-it-works/step-6.svg) + +## Сombine with an original image + +The last step is combine svg contour and image to one file. To do this we encode source image to base64 and add it to svg code. + +![](assets/how-it-works/step-7.svg)