imageupload Directive for AngularJS

heavly inspired from http://www.rubydesigner.com/blog/resizing-images-before-upload-using-html5-canvas.

<imageupload 
    input-id="inputImage"
    original-image="data.imageBig"        
    resize-image="data.image"
    resize-quality="0.7"
    resize-max-height="320"
    resize-max-width="270">
</imageupload>

See demo.html for an example.

• resize-quality
• resize-max-height
• resize-max-width

(INFO: optional resized-image will come soon.)

• Upload Image with FileReader
• Resize Image via canvas
• Send Image Blob with FormData and $http

git clone https://github.com/Mischi/angularjs-imageupload-directive.git
cd angularjs-imageupload-directive
npm install

node app.js
open http://localhost:8080

• blueimp/JavaScript-Canvas-to-Blob

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

• Firefox 18 (Windows 8) / BUG: filename gets lost and file is just called "blob", working on that...
• filesize can vary from Browser to Browser.