https://github.com/m-zubairahmed/hoe
An image cropping and printing tool
https://github.com/m-zubairahmed/hoe
cropperjs reactjs
Last synced: 4 months ago
JSON representation
An image cropping and printing tool
- Host: GitHub
- URL: https://github.com/m-zubairahmed/hoe
- Owner: M-ZubairAhmed
- Created: 2018-05-09T09:16:41.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-23T03:15:50.000Z (about 8 years ago)
- Last Synced: 2025-01-18T05:14:55.875Z (over 1 year ago)
- Topics: cropperjs, reactjs
- Language: JavaScript
- Homepage: https://image-hoe.netlify.app/
- Size: 142 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
HOE
An image cropping and printing tool
> Meaning :- verb :
> use a hoe to dig (earth) or thin out or dig up (plants).
#### Goal:
Create a react input component that
* allows a user to upload an image
* crop it to a size determined by the user
* save the cropped image to an API
* view the saved image
* print the image
#### Requirements:
* [x] The maximum file size of the initial uploaded image should be 1mb
* [x] The maximum image dimensions after cropping should be 800x100
* [x] upload the image so using the following code and use the returned URL for previewing the image:
```Javascript
function saveImage(imageFile) {
return Promise.resolve("http://lorempixel.com/800/100/cats/");
}
```
- [x] The input should be clearable
- [x] no image is a valid value
- [x] There should be a button called "Print Preview". When clicked it should open a new tab, print a page which has the new image centered at the top, and then close the tab after printing
- [x] If no image has been saved then the print button should be disabled
- [x] The displayed image in print preview should be no higher than 100px.
#### Flow Diagram :
