Demo AngularJS imageupload Directive
Description
imageupload Directive for AngularJS
Usage
Please see the demo HTML for better and tested examples.
Features
- Upload Image with FileReader
- Resize Image via canvas
- Make image cover certain size while maintaining its original height-width ratio
- Choose cover origin ( left - center - right / top - center - bottom )
- Send Image Data URL (base64) to whatever you want.
- External Drag and Drop support
Single image
The image object has the following properties:
- file
- url
- dataURL
Single image with resizing
The image object has the following properties:
- file
- url
- dataURL
- resized
- dataURL
- type
Multiple images with resizing
OriginalResized
When used with multiple the image object is always an array of objects with the following properties:
- file
- url
- dataURL
- resized
- dataURL
- type
Single image with covering
OriginalResized
Optional Parameter:
- resize-quality (default is 0.7)
- resize-type (default is 'image/jpg')
- resize-max-height (default is 300)
- resize-max-width (default is 250)
- cover
- cover-height (default is 300)
- cover-width (default is 250)
- cover-x (default is 'left')
- cover-y (default is 'top')
- append (appends to model list as opposed to overwriting it)
How to run the Demo?
git clone https://github.com/boxxxie/angularjs-imageupload-directive.gitcd angularjs-imageupload-directivenpm install node demo/back-end/app.jsopen http://localhost:8080
Depends on
- angular-1.2.15
Tested in following browsers:
Testimage: 4320x3240 4.22 MB, Resized (70% jpg): 320x270
- Chrome 24 (Windows 8), Size: 9.3 KB
- Chrome Canary 27 (Windows 8), Size: 9.3 KB
- Firefox 18 (Windows 8), Size: 23.5 KB
- Internet Explorer 10 (Windows 8), Size: 9.06 KB
Known Issues
- current demo may not work correctly. please submit PR if you can fix it (may need a build script)
- filesize can vary from Browser to Browser.
TODO's
- better drag and drop support
- make a build file and break up the main source file into smaller pieces.