angular-thumbnail

WebJar for angular-thumbnail

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-thumbnail
Last Version	0.1.2
Release Date	Oct 11, 2016
Type	jar
Description	angular-thumbnail WebJar for angular-thumbnail
Project URL	http://webjars.org
Source Code Management	https://github.com/kennyki/angular-thumbnail

Download angular-thumbnail

Filename	Size
angular-thumbnail-0.1.2.pom
angular-thumbnail-0.1.2.jar	7 KB
angular-thumbnail-0.1.2-sources.jar	22 bytes
angular-thumbnail-0.1.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-thumbnail/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-thumbnail</artifactId>
    <version>0.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-thumbnail/
implementation 'org.webjars.bower:angular-thumbnail:0.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-thumbnail/
implementation ("org.webjars.bower:angular-thumbnail:0.1.2")

Apache Buildr

'org.webjars.bower:angular-thumbnail:jar:0.1.2'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-thumbnail" rev="0.1.2">
  <artifact name="angular-thumbnail" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-thumbnail', version='0.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-thumbnail" % "0.1.2"

Leiningen

[org.webjars.bower/angular-thumbnail "0.1.2"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : blueimp-canvas-to-blob	jar	[2.1.1,2.2)

Project Modules

There are no modules declared in this project.

Angular Thumbnail

AngularJS thumbnail service to generate blob or base64 data as well as directive to display an image as thumbnail in canvas. Perfect for an Ionic app.

Demo

http://kennyki.github.io/angular-thumbnail

Possible Usage

1. Generate thumbnail for pictures from gallery/camera to store locally or remotely in PhoneGap/cordova apps. You don't need a plugin for that.
2. Display thumbnail for pictures from gallery/local db in a list in PhoneGap/cordova apps. Because CSS resizing on many pictures can be very consuming.
3. Resizing before upload to a server.

Anti-pattern

1. Generating thumbnails from large images in a desktop web application.
   • first of all, CSS resizing (setting width and height) should be sufficient as most of the desktop will have enough power to do it. But:
   • consider requesting for smaller images from the server.
   • if the images are external you should cache them in your own server and resize them there.

Installation

1. Install through bower bower install angular-thumbnail or download the package manually.
2. In your index.html, import:
   1. canvas-to-blob.min.js only if you need to generate blob data
   2. angular-thumbnail.min.js
3. Add dependency to your module angular.module('', ['ui.thumbnail']);
4. Enable CORS <access origin="*"/> in the config.xml

API

Configurations

angular.module('', ['ui.thumbnail'])

.config(function(ThumbnailServiceProvider) {
  // otherwise both defaults to 100
  ThumbnailServiceProvider.defaults.width = 150;
  ThumbnailServiceProvider.defaults.height = 150;
})

;

Directive

Hmm.. it's clearer in the demo's source code.

Service

A ThumbnailService dependency can be injected into a controller.

ThumbnailService.generate(src, opts)

• Parameters:

  • src: either a url or base64 string
  • opts: an optional object of
    • width: number (defaults to 100)
    • height: number (defaults to 100)
    • returnType: 'blob' (defaults to 'base64')
    • type: 'image/jpeg' (defaults to 'image/png')
    • noDistortion: boolean. If true, the image will not get distorted. (defaults to false)
    • encoderOptions: A number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp'.

• Returns: a promise that resolves with a base64 string or blob

Versions

Version
0.1.2 Oct 11, 2016