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.
- Run
npm install
to install dependencies. - Run
npm start
to start the development server and navigate tohttp://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 thedist/
directory. Use the--prod
flag for a production build.
-
Start by adding an image from your hard drive. For testing, a sample of images are included in the project.
-
Click the "Add image" button to add an image to the canvas.
-
Drag and resize the image and resize it until it looks the way you want.
-
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.
-
Use the controls on the right to add text and branding elements to the image.
-
Once you've added an image to the canvas, you will be able to download it as a png by clicking on "Download Card".
-
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.
-
Select a saved image to load it into the canvas so that you can apply more edits and download it gain.
- 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
This project was generated with Angular CLI version 11.2.8.
This project uses a fork of the official canvas-text-wrapper package that handles wrapping text in the canvas element
download.js is used to manage downloads of the canvas as pngs
Image dragging and resizing features are inspired by the code in this this JSFiddle.
© Justin Smith - BU MET CS701 - Spring 2 2021