Skip to content

Commit

Permalink
Merge pull request #16 from FBerthelot/1.1.0
Browse files Browse the repository at this point in the history
1.1.0
  • Loading branch information
FBerthelot committed Mar 8, 2016
2 parents 23d0d9c + d6e83f0 commit 638d543
Show file tree
Hide file tree
Showing 86 changed files with 14,337 additions and 874 deletions.
16 changes: 16 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
indent_size = 4

[*.md]
trim_trailing_whitespace = false
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules/
angular-images-resizer.js
dist/
59 changes: 59 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{
"root": true,
"extends": "eslint:recommended",
"rules": {
"semi": [2, "always"],
"indent": [2, 4, { "SwitchCase": 1 }],
"no-unexpected-multiline": 2,
"no-alert": 2,
"dot-location": [2, "property"],
"eqeqeq": 2,
"consistent-return": 2,
"no-eval": 2,
"no-floating-decimal": 2,
"no-implied-eval": 2,
"no-lone-blocks": 2,
"no-loop-func": 2,
"no-multi-spaces": 2,
"no-new-wrappers": 2,
"no-script-url": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-throw-literal": 2,
"no-useless-call": 2,
"no-useless-concat": 2,
"no-void": 1,
"no-warning-comments": [1, { "terms": ["todo", "fixme"], "location": "start" }],
"no-with": 2,
"radix": 2,
"strict": [2, "global"],
"no-shadow-restricted-names": 2,
"no-undef-init": 2,
"no-undef": 2,

"array-bracket-spacing": [2, "never"],
"block-spacing": [2, "always"],
"brace-style": [2, "stroustrup", { "allowSingleLine": true }],
"camelcase": [2, {"properties": "always"}],
"comma-spacing": [2, {"before": false, "after": true}],
"comma-style": [2, "last"],
"computed-property-spacing": [2, "never"],
"eol-last": 2,
"key-spacing": [2, {"beforeColon": false, "afterColon": true}],
"linebreak-style": [2, "unix"],
"new-cap": 1,
"new-parens": 2,
"no-array-constructor": 2,
"no-bitwise": 2,
"no-multiple-empty-lines": [2, {"max": 2, "maxEOF": 1}],
"no-trailing-spaces": 2,
"quotes": [2, "single"],
"semi-spacing": 2,
"space-after-keywords": 2,
"space-before-blocks": 2,
"space-before-function-paren": 2,
"space-infix-ops": 2,
"space-return-throw-case": 2,
"space-unary-ops": 2
}
}
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,4 @@ proguard/

#bower_components
**/bower_components

dist/
33 changes: 0 additions & 33 deletions .jshintrc

This file was deleted.

6 changes: 3 additions & 3 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
exemple
example
bower.json
test
tasks
script
gulp
script
21 changes: 0 additions & 21 deletions Gruntfile.js

This file was deleted.

155 changes: 83 additions & 72 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,72 +1,83 @@
Angular-image-resizer
=====================
[ ![Codeship Status for FBerthelot/angular-images-resizer](https://codeship.com/projects/3846cd60-4732-0132-6b8e-12291817bdc0/status?branch=master)](https://codeship.com/projects/45512)
[![Coverage Status](https://img.shields.io/coveralls/FBerthelot/angular-images-resizer.svg)](https://coveralls.io/r/FBerthelot/angular-images-resizer)
[![devDependency Status](https://david-dm.org/FBerthelot/angular-images-resizer/dev-status.svg)](https://david-dm.org/FBerthelot/angular-images-resizer#info=devDependencies)

This is a simple angular service which resizes images client-side. With this component, you will liberate some ressources on your server! Let your client work for you, and save bandwidth. If you don't care about supporting every browsers then this component is for you.

You can test this module on this site exemple: http://fberthelot.github.io/angular-images-resizer/

##Get started
Add this module to your project with bower:
```javascript
bower install angular-images-resizer
```

Add the component to your app:
```javascript
angular.module('app', ['images-resizer']);
```

Then simply add the service to your code and start resizing your images!
```javascript
angular.module('app', ['resizeService', '$scope',
resizeService.resizeImage('ressources/imageToResize', {size: 100, sizeScale: 'ko', otherOptions: ''}, function(err, image){
if(err) {
console.error(err);
return;
}

//Add the resized image into the
var imageResized = document.createElement('img');
imageResized.src = image;
$('body').appendChild(imageResized);
});
}]);
```
##Availables functions
####resizeImage
This is the main function of this service. The function take 3 argument, the src of the image, the options to resize the image and the callback.
The src can be an base 64image.
###### Options
* height: desired height of the resized image
* width: desired width of the resized image
* size: desired size of the resized image (Size are by default in Octet)
* sizeScale: 'o' || 'ko' || 'mo' || 'go'
* step: number of step to resize the image, by default 3. Bigger the number, better is the final image. Bigger the number, bigger the time to resize is.
* outputFormat: specify the image type. Default value is 'image/jpeg'. [Check this page to see what format are supported.] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)


##Compatibility
This module uses canvas, so it's only compatible with:
* Firefox 4+
* Chrome 14+
* Internet explorer 9+
* Safari 5+
* ios ??
* Android browser 4+
* Chrome for android All

##I need help
* This angular component doesn't work on iPhones with iOS 8.1, but works on iPad and iPod touch with iOS 8.1. I still don't understand why, if someone has an explanation, it would be nice.
* I don't know how to test the resizeLocalPic service. If someone can help me on this subject.
* I wanna load local files when karma run tests. If someone can tell me how to load relative path in the proxies' karma.
Thanks

##Special thanks
* This module is widely inspired by this article of the [liip blog] (https://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html).
* [Viseo] (http://www.viseo.com/)

##Licence
MIT
# Angular-image-resizer

[![Codeship Status for FBerthelot/angular-images-resizer](https://codeship.com/projects/3846cd60-4732-0132-6b8e-12291817bdc0/status?branch=master)](https://codeship.com/projects/45512)
[![Coverage Status](https://img.shields.io/coveralls/FBerthelot/angular-images-resizer.svg)](https://coveralls.io/r/FBerthelot/angular-images-resizer)
[![devDependency Status](https://david-dm.org/FBerthelot/angular-images-resizer/dev-status.svg)](https://david-dm.org/FBerthelot/angular-images-resizer#info=devDependencies)

This is a simple angular service which resizes images client-side. With this component, you will liberate some resources on your server!
Let your client work for you, and save bandwidth. If you don't care about supporting every browsers then this component is for you.

You can test this module on this site example: http://fberthelot.github.io/angular-images-resizer/

## Breaking changes in the 1.1.0 version

In this version the `resizeService.resizeImage` function return a promise. No need to use a callback anymore.

## Get started
Add this module to your project with bower:

```javascript
bower install angular-images-resizer
```

Add the component to your app:
```javascript
angular.module('app', ['images-resizer']);
```

Then simply add the service to your code and start resizing your images :

```javascript
angular.module('app', function ($document, $log, $scope, resizeService) {
resizeService
.resizeImage('resources/imageToResize', {
size: 100,
sizeScale: 'ko'
// Other options ...
})
.then(function(image){
// Add the resized image into the body
var imageResized = document.createElement('img');
imageResized.src = image;
$document[0].querySelector('body').appendChild(imageResized);
})
.catch($log.error); // Always catch a promise :)
```
## Availables functions
[Click here to see the Full documentation](http://fberthelot.github.io/angular-images-resizer/docs/index.html)
#### resizeImage
This is the main function of this service. The function take 3 argument, the src of the image, the options to resize the image and the callback.
The src can be an base 64image.
###### Options
- height: desired height of the resized image
- width: desired width of the resized image
- size: desired size of the resized image (Size are by default in Octet)
- sizeScale: 'o' || 'ko' || 'mo' || 'go'
- step: number of step to resize the image, by default 3. Bigger the number, better is the final image. Bigger the number, bigger the time to resize is.
- outputFormat: specify the image type. Default value is 'image/jpeg'. [Check this page to see what format are supported.] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
- crossOrigin: Specify the crossOrigin of the image to resize
## Compatibility
This module uses canvas, so it's only compatible with:
* Firefox 4+
* Chrome 14+
* Internet explorer 9+
* Safari 5+
* ios ??
* Android browser 4+
* Chrome for android All
## I need help
* This angular component doesn't work on iPhones with iOS 8.1, but works on iPad and iPod touch with iOS 8.1. I still don't understand why, if someone has an explanation, it would be nice.
* I don't know how to test the resizeLocalPic service. If someone can help me on this subject.
Thanks
## Special thanks
* This module is widely inspired by this article of the [liip blog] (https://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html).
## Licence
MIT

0 comments on commit 638d543

Please sign in to comment.