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.
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
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 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:- 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.
- 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.
- 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.
- 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
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