Permalink
Browse files

crop percentage

  • Loading branch information...
1 parent 2187609 commit b72acf9bdd5e0e139a45a5c7b3911077843e2e13 @saml committed Aug 8, 2013
Showing with 61 additions and 4 deletions.
  1. +18 −0 README.markdown
  2. +2 −1 src/Server.js
  3. +37 −3 src/UrlParser.js
  4. +2 −0 src/main.js
  5. +2 −0 src/settings.js
View
@@ -17,6 +17,14 @@ You can specify where to crop other than center. The following crops at the top
GET /some/image.10x20n.jpg
```
+You can specify crop size in percentage (defaults to `100%`):
+
+```
+GET /some/image.10x20n.70.jpg
+```
+
+would crop 1:2 rectangle that'll fit about 70% of original image.
+
Other parameters:
Parameter | Crops At | Example | Comment
@@ -26,6 +34,10 @@ n | North | GET /a/b.100x400n.jpg |
s | South | GET /a/b.100x400s.jpg |
w | West | GET /a/b.100x400w.jpg |
e | East | GET /a/b.100x400e.jpg |
+nw | NorthWest | GET /a/b.100x400nw.jpg |
+ne | NorthEast | GET /a/b.100x400ne.jpg |
+sw | SouthWest | GET /a/b.100x400sw.jpg |
+se | SouthEast | GET /a/b.100x400se.jpg |
t | No Crop | GET /some/image.100x400t.jpg | Instead of cropping, some/image.jpg is resized to fit in 100x400 rectangle.
# Example
@@ -35,15 +47,21 @@ t | No Crop | GET /some/image.100x400t.jpg | Instead of cropping, some/image.jpg
- [300x300 cropped to center](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300.jpg)
- [300x300 cropped to west](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300w.jpg)
- [300x300 cropped to east](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300e.jpg)
+ - [300x300 cropped to north west 100%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300nw.jpg)
+ - [300x300 cropped to north west 50%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300nw.50.jpg)
- [300x300 thumbnail](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.300x300t.jpg)
- Horizontal to vertical:
- [320x480 cropped to center](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.320x480.jpg)
- [320x480 cropped to west](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.320x480w.jpg)
- [320x480 cropped to east](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.320x480e.jpg)
+ - [320x480 cropped to north east 100%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.320x480ne.jpg)
+ - [320x480 cropped to north east 75%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.320x480ne.75.jpg)
- Horizontal to horizontal:
- [500x281 cropped to center](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.500x281.jpg)
- [500x281 cropped to north](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.500x281n.jpg)
- [500x281 cropped to south](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.500x281s.jpg)
+ - [500x281 cropped to south west 100%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.500x281sw.jpg)
+ - [500x281 cropped to south west 80%](http://nodejs-resize-image.herokuapp.com/http://i.imgur.com/gWthS3m.500x281sw.80.jpg)
# Quickstart
View
@@ -6,6 +6,7 @@ var events = require('events');
var util = require('./util');
var UrlParser = require('./UrlParser');
+var settings = require('./settings');
var Server = function(convertCmd, srcDir, destDir, cacheImages, maxOutputSize) {
var me = {};
@@ -150,7 +151,7 @@ var Server = function(convertCmd, srcDir, destDir, cacheImages, maxOutputSize) {
var serveCachedImageOrGenerate = function(param) {
fs.exists(param.out, function(exists) {
- if (exists) {
+ if (exists && !settings.debug) {
serveCachedImage(param.out);
} else {
resizeImage(param.src, param.out, param.args, function() {
View
@@ -59,12 +59,16 @@ var Module = function(srcDir, destDir, maxOutputSize) {
var CropParser = function() {
var me = {};
- var UrlRE = /^\/(.+)\.(\d+)x(\d+)(n|w|s|e)?(\.\w+)$/;
+ var UrlRE = /^\/(.+)\.(\d+)x(\d+)(n|w|s|e|nw|ne|sw|se)?(\.\d+)?(\.\w+)$/;
var GravityMap = {
n: 'North',
w: 'West',
s: 'South',
e: 'East',
+ nw: 'NorthWest',
+ ne: 'NorthEast',
+ sw: 'SouthWest',
+ se: 'SouthEast'
};
var getGravity = function(key) {
@@ -74,6 +78,26 @@ var Module = function(srcDir, destDir, maxOutputSize) {
return GravityMap[key];
};
+ var MIN_CROP_PERCENT = 10;
+ var MAX_CROP_PERCENT = 100;
+
+ var getCropPercentage = function(percent) {
+ if (typeof percent === 'undefined') {
+ return undefined;
+ }
+ percent = percent.substring(1) * 1;//get rid of leading dot.
+ if (Number.isNaN(percent)) {
+ return undefined;
+ }
+ if (percent <= MIN_CROP_PERCENT) {
+ return MIN_CROP_PERCENT;
+ }
+ if (percent >= MAX_CROP_PERCENT) {
+ return MAX_CROP_PERCENT;
+ }
+ return percent;
+ };
+
me.parse = function(url) {
var m = UrlRE.exec(url);
if (!m) {
@@ -84,19 +108,29 @@ var Module = function(srcDir, destDir, maxOutputSize) {
var width = size.width;
var height = size.height;
var gravity = getGravity(m[4]);
- var ext = m[5];
+ var cropPercentage = getCropPercentage(m[5]);
+ var ext = m[6];
var imgId = m[1] + ext;
var src = getImgPath(imgId);
var out = getOutputPath(url);
var remoteUrl = getRemoteOriginUrl(imgId);
+
+ var initialResizeWidth = width;
+ var initialResizeHeight = height;
+ if (cropPercentage) {
+ var initialCropRatio = -1/100 * cropPercentage + 2;
+ initialResizeWidth = Math.floor(width * initialCropRatio);
+ initialResizeHeight = Math.floor(height * initialCropRatio);
+ }
+
return ({
remoteUrl: remoteUrl,
width: width,
height: height,
src: src,
out: out,
- args: ['-resize', '%sx%s^'.f(width, height),
+ args: ['-resize', '%sx%s^'.f(initialResizeWidth, initialResizeHeight),
'-gravity', gravity,
'-crop', '%sx%s+0+0'.f(width, height),
'+repage']
View
@@ -14,6 +14,7 @@ var main = function() {
var baseDir = process.cwd();//__dirname;
var cacheImages = settings.cacheImages;
var maxOutputSize = settings.maxOutputSize;
+ var debug = settings.debug;
if (!srcDir.startsWith('/')) {
srcDir = path.join(baseDir, srcDir);
@@ -32,6 +33,7 @@ var main = function() {
+ ' destDir %s\n'.f(destDir)
+ ' cacheImages %s\n'.f(cacheImages)
+ ' maxOutputSize %s\n'.f(maxOutputSize)
+ + ' debug %s\n'.f(debug)
);
var server = Server(convertCmd, srcDir, destDir, cacheImages, maxOutputSize);
View
@@ -15,6 +15,8 @@ config.cacheImages = true;
//maximum supported output image size.
config.maxOutputSize = 1200;
+config.debug = false;
+
var localConfig = {};
try {
localConfig = require('./settings.local');

0 comments on commit b72acf9

Please sign in to comment.