Demo AngularJS imageupload Directive

Description

imageupload Directive for AngularJS

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

Usage

Single image

<input type="file" accept="image/*" image="image"/>
<img ng-show="image" ng-src="{{image.url}}" type="{{image.file.type}}" />

The image object has the following properties:

• file
• url
• dataURL

Single image with resizing

<input-image
    id="inputImage"
    append-data-uri
    ng-model="image">
</input-image>

<img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/>

The image object has the following properties:

• file
• url
• dataURL
• resized
  • dataURL
  • type

Multiple images with resizing

<input-image
    id="inputImage2"
    append-data-uri
    resize
    resize-max-height="300"
    resize-max-width="250"
    resize-quality="0.7"
    ng-model="image">
</input-image>

<p>Original</p>
<img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/>
<p>Resized</p>
<img ng-show="image" ng-src="{{image.resized.dataURL}}"/>

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

<input-image
    id="inputImage5"
    ng-model="image"
    append-data-uri
    cover
    cover-height="300"
    cover-width="100"
    cover-x="center"
    cover-y="bottom"
    resize-quality="0.7">
</input-image>

<p>Original</p>
<img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/>
<p>Resized</p>
<img ng-show="image" ng-src="{{image.resized.dataURL}}"/>

See demo.html for more concrete examples.

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 (default is false)
• cover-height (default is 300)
• cover-width (default is 250)
• cover-x (default is 'left')
• cover-y (default is 'top')

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.

How to run the Demo?

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

node demo/back-end/app.js
open http://localhost:8080

Depends on

• angular-1.1.4

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

• filesize can vary from Browser to Browser.

TODO's

• Use NgModelController instead of image attribute
• Create bower compatible repository (component.json, tags, etc.)
• Match angular-component-spec when it becomes available
• Clear image property when Form has been reset
• Create Unit Tests