Friday 15 August 2014

image processing and manipulate in node.js with express

Standard
suppose you have milk,sugar and water but you don't know how you process a ice cream then this all stuff going to waste or no matter what resource you have, like you have image but you don't know how you process or manipulate for your requirement so
today i will tell how node.js manipulate or process a image or how you manipulate or process a image in node.js with express framework.

node have lots of image module like.



node-canvas
  • I tried it first since I'm quite familiar with <canvas> API. It's a huge plus for a library.
  • it requires Cairo which doesn't have an easy Windows download. I found it in GTK+ distribution though.
  • moreover it needs native library binding code to be compiled on module installation. It uses Node-Waf hasn't being ported to Windows yet.
gm
  • mature
  • runs on Windows smoothly
  • docs are ok but not thorough: I had to look up into source code to figure out what API is available
  • unfortunately there's no easy way to combine images with gm. Maybe there's some way to achieve that but I haven't found one after two hours spent with it.
node-imagemagick
  • The official repo has very few basic ImageMagick commands covered but I used this fork (good thing that NPM can pull libraries directly from git repositories). It has bindings for montage witch does exactly what I need.
  • ImageMagick is quite slow, though it works on Windows.
Node-Vips
  • Huge plus: it uses an incredible VIPS library which I'm familiar with. VIPS is very fast and optimized for large images. It's very smart about utilizing hardware resources: if your machine has a lot of RAM it'll do all processing in memory but will switch to hard-drive caches if memory is scarce or required for other applications.
  • same as node-canvas it requires Node-Waf so it's now available yet for Windows
i think you have selected your module/libraries but today i will discus on gm module but if you want to use first of need to install imagemagic tools open command prompt and type bellow command:

sudo apt-get install imagemagick

then you need to install two node module one fs(file system) and gm(graphic mazic) so open your terminal and go to your app folder and type bellow command:

sudo npm install fs
sudo npm install gm

after installation complete add enctype="multipart/form-data" in form and add a input filed <input type="file" name="profile_image">

and next open your post function and add bellow content

var fs = require('fs')
  , gm = require('gm');

    var dt_join=Math.round(+new Date()/1000);
    var profile_image=req.files.profile_image;
        var tmp_path=profile_image.path;
        var pic_arr=profile_image.name.split('.');

//create a file name
        var pic_name=dt_join+'.'+profile_image.name.split('.')[pic_arr.length-1];
        var target_path='./public/images/profile/'+pic_name;
        var thumb_path='./public/images/profile/thumb/'+pic_name;

//store your image at server
        fs1.rename(tmp_path,target_path,function(err){
                if(err){next(err);}
                fs1.unlink(tmp_path,function(){
                        if(err){next(err);}
 //resize your image and store your specified folder

gm(target_path).resize(100,100).noProfile().write(thumb_path, function (err) {if (!err) console.log('thumb done');else console.log(err);});
                    });
            });


Explain code:

 fs1.rename(tmp_path,target_path,function(err) - this function for upload your image at specific folder in server.

gm(target_path).resize(100,100).noProfile().write(thumb_path, function (err) {if (!err) console.log('thumb done');else console.log(err);}) - this function resize your image and store your specified folder

and also image manupulation function is.

// obtain the size of an image
gm('/path/to/my/img.jpg')
.size(function (err, size) {
  if (!err)
    console.log(size.width > size.height ? 'wider' : 'taller than you');
});


// output all available image properties
gm('/path/to/img.png')
.identify(function (err, data) {
  if (!err) console.log(data)
});


// pull out the first frame of an animated gif and save as png
gm('/path/to/animated.gif[0]')
.write('/path/to/firstframe.png', function (err) {
  if (err) console.log('aaw, shucks');
});


// auto-orient an image
gm('/path/to/img.jpg')
.autoOrient()
.write('/path/to/oriented.jpg', function (err) {
  if (err)
});


// crazytown
gm('/path/to/my/img.jpg')
.flip()
.magnify()
.rotate('green', 45)
.blur(7, 3)
.crop(300, 300, 150, 130)
.edge(3)
.write('/path/to/crazy.jpg', function (err) {
  if (!err) console.log('crazytown has arrived');
});


// annotate an image
gm('/path/to/my/img.jpg')
.stroke("#ffffff")
.drawCircle(10, 10, 20, 10)
.font("Helvetica.ttf", 12)
.drawText(30, 20, "GMagick!")
.write("/path/to/drawing.png", function (err) {
  if (!err) console.log('done');
});


// creating an image
gm(200, 400, "#ddff99f3")
.drawText(10, 50, "from scratch")
.write("/path/to/brandNewImg.jpg", function (err) {
  // ...
});


so now you know how to create a ice cream so process your ice cream and enjoy.

reference:
https://github.com/joyent/node/wiki/modules