An awesome web-app that converts an HTML element into an image such as a quote.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Quotes Lab is a web application for converting HTML mockups to images. Quotes Lab leverages on Pixabay's API and the dom-to-image-more npm package to produce a high-quality image in base64. All these are layered together inside the VueJs 3 JavaScript framework.
The following tools were used in the building of Quotes Lab.
To get this project running on your system observe and implement the following procedures.
Get the latest VueJs CLI installed on your machine by entering this command on your terminal.
- npm
npm install -g @vue/cli
- Get a free API Key at Pixabay's Doc
- Clone the repo
git clone https://github.com/Daltonic/quoteLab.git
- Install NPM packages
npm install
- Enter your API in
config.jsconst API_KEY = 'ENTER YOUR API';
When you visit the app domain at Quotes Lab, enter the keyword of the image you want to convert to a quote.
After entering your keyword cards of images will be rendered on the page on which you should select any to proceed to the next step. You can always click on the Load more button if you are not satisfied with the image result.
After selecting an image you proceed to enter your quote and your name within the form below.
Once you are done editing your quote, you click on the capture button to convert it to an image and the output will be seen below.
Within this component are two buttons, one gets the image downloaded to your device while the other removes the image from the view.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Gospel Darlington - Facebook - darlingtongospel@gmail.com
Project Link: https://github.com/Daltonic/quoteLab