Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richardzcode/crop5.js
Client side image cropping using HTML5 canvas and File API.
https://github.com/richardzcode/crop5.js
Last synced: about 1 month ago
JSON representation
Client side image cropping using HTML5 canvas and File API.
- Host: GitHub
- URL: https://github.com/richardzcode/crop5.js
- Owner: richardzcode
- Created: 2012-02-16T01:40:20.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2012-02-16T01:54:56.000Z (almost 13 years ago)
- Last Synced: 2024-04-14T09:14:22.516Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Crop5.js
## Version
0.0.1
## Intro
Client side image cropping using HTML5 canvas and File API.
Only final cropped result been send to server.
No limitation on initial image size, as long as client machine can handle.
Benefits two sides:
* User able to crop from bigger image, no waiting for initial image upload.
* Sever saves bandwidth and computation power.## Usage
1. Include crop5.js to page.
2. Add this line of js:
```
$.('#canvas_element_id').crop5();
```
3. Do cropping
4. Get data
```
$.('#canvas_element_id').crop5('get');
```## Options
* fileSelector: The file input for choosing image file. If empty then a new file input would be created.
```
$.('#canvas_element_id').crop5({fileSelector: '#uploadForm input[name=imagePicker]'});
```* imageType: Output image type. Default 'image/jpeg'.
```
$.('#canvas_element_id').crop5({imageType: 'image/png'});
```