https://github.com/justintemps/ilo-meme-maker
A simple meme maker I built to learn Angular
https://github.com/justintemps/ilo-meme-maker
Last synced: about 1 month ago
JSON representation
A simple meme maker I built to learn Angular
- Host: GitHub
- URL: https://github.com/justintemps/ilo-meme-maker
- Owner: justintemps
- Created: 2021-04-22T15:07:50.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-29T08:18:59.000Z (about 4 years ago)
- Last Synced: 2025-04-23T23:52:46.596Z (about 1 month ago)
- Language: TypeScript
- Size: 1.52 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://docs.google.com/presentation/d/1Rsotc_M68lcvqSDaEhJnVD_llyqGi3oxr6dFK8EGsPE/edit?usp=sharing).
## 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](https://dev.to/iamscottcab/using-hot-module-replacement-in-angular-11-mji) 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](./test-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](https://github.com/angular/angular-cli) version 11.2.8.
### canvas-text-wrapper
This project uses a [fork](https://github.com/cyberj/canvas-text-wrapper) of the official [canvas-text-wrapper](https://github.com/namniak/canvas-text-wrapper) package that handles wrapping text in the canvas element
### download.js
[download.js](http://danml.com/download.html) 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](http://jsfiddle.net/m1erickson/LAS8L/).
## Copyright
© Justin Smith - BU MET CS701 - Spring 2 2021