Quote Card Maker

Quote Card Maker is an Angular application that allows the user to create and customize downloadable Quote Card images in the browser. The images can also be saved to local storage for retrieval and further editing.

More information about this project can be found in these Slides.

Install and run

• Run npm install to install dependencies.
• Run npm start to start the development server and navigate to http://localhost:4200/
• Run npm run dev to start the development server with Hot Module Reloading enabled
• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

How to use

1. Start by adding an image from your hard drive. For testing, a sample of images are included in the project.

2. Click the "Add image" button to add an image to the canvas.

3. Drag and resize the image and resize it until it looks the way you want.

4. You can resize the image by clicking and dragging on the red circles that appear at the corners of the image when you mouse over it.

5. Use the controls on the right to add text and branding elements to the image.

6. Once you've added an image to the canvas, you will be able to download it as a png by clicking on "Download Card".

7. Once an image and a speaker name have been added to the card, you will be able to save it. Saved cards appear at the bottom of the page.

8. Select a saved image to load it into the canvas so that you can apply more edits and download it gain.

Features

• Loads image to the canvas.
• Images can be moved and resized.
• Logo can be added in one of two colors
• A colored background can be added to the canvas in one of three colors
• Text can be added to the Canvas in one of three colors
• Card can be downloaded as a png
• Card can be saved in local storage for editing later

What's inside

This project was generated with Angular CLI version 11.2.8.

canvas-text-wrapper

This project uses a fork of the official canvas-text-wrapper package that handles wrapping text in the canvas element

download.js

download.js is used to manage downloads of the canvas as pngs

Acknowledgements

Image dragging and resizing features are inspired by the code in this this JSFiddle.

Copyright

© Justin Smith - BU MET CS701 - Spring 2 2021