Skip to content

Latest commit

 

History

History
162 lines (121 loc) · 3.29 KB

README.md

File metadata and controls

162 lines (121 loc) · 3.29 KB
Raw

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

<button
    input-image
    ng-model="image"
    ng-change="uploadImage(image)">
</button>
<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

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

<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

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

<p>Original</p>
<img ng-show="images" ng-src="{{images[0].dataURL}}" type="{{images[0].file.type}}"/>
<p>Resized</p>
<img ng-show="images" ng-src="{{images[0].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

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

<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}}"/>

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.git
cd angularjs-imageupload-directive
npm install

node demo/back-end/app.js
open 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.