UI Photo Editor
Tool to personalize photos by adding filters and personal content in foreground.
Sonia is a poetry writer and she likes to associate words with good images. She found in Mutatio the right tool to personalize the next photo she wants to post on her social media profile.
Once opened the tool she uploads the image to visualize it in the dashboard. Then she selects the best preset colored filters that look fabulous with that image. In the left side of the page, she found a text editor where she can write her poetry. She knows that she can add style using markdown rules and positioning the content in the picture where she likes most.
Once she's happy with the result can finally add her watermark to the photo and click the button to download the final product and publish it.
- HTML/CSS
- JavaScript
- Vue.js
- html2canvas
I learned the basics of Vue.js and how to use Component features.
I implemented a Markdown editor in order to allow users to add a content in the image.
I used the library html2canvas to transform the image container with the text into a canvas in order to take a screenshot and download the final result.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build