Elvis Miranda

Elvis Miranda

1575043594

Image Processing in Node.js Using Jimp Library

You are requested by a client to watermark an entire library of images, as well as cropping them to a consistent resolution. In fact, your solution needs to be integrated within the client’s existing Javascript infrastructure. This can be done with a simple yet capable (relatively new) package for NodeJS, named Jimp.

Jimp stands for JavaScript Image Manipulation Program, which is simply explained on it’s project page as “The “JavaScript Image Manipulation Program” :-)” — The project page can be found here:

jimp

Jimp adoption is on a growing trajectory, currently attracting over 180,000 weekly downloads at the time of this writing.

I found that they are quick to investigate and address issues on Github. Having found an issue myself on version 0.4.0 relating to text alignment, it was addressed within 24 hours and closed within 48 hours with a commit lined up for the next version.

The open issues right now are only in the 40s, which is quite impressive for such a large library that is also relatively new. There is clearly an active community here, therefore is a reliable bet to have under your npm belt.

Install the package into your project with the following command:

npm i jimp

Before jumping into Jimp development, make sure that it supports the image types you are working with — it is a bitmap manipulation library, so do not expect any SVG or vector based support here (this also means we need to convert popular font file formats (.otf, .ttf) into bitmap font files with the .fnt file format — more on this later).

Supported file types:

  • @jimp/jpeg
  • @jimp/png
  • @jimp/bmp
  • @jimp/tiff
  • @jimp/gif

Working with Images in NodeJS

Jimp can be imported directly into a serverside node script. We can adopt a promise based command flow that allows us to manipulate one thing at a time — build up our edits on our image and finally save our final image with the Jimp.write() function.

Using the Jimp library is actually a great way to practice your promises as each task can be broken down into a number of then() extensions, which we will soon see being demonstrated.

The way we will break down our image editing task is by doing the following:

  1. Reading a template / base image to work with in a raw directory.
  2. Clone it into a separate active image file that we know will be manipulated.
  3. Read the cloned image ready to make manipulations
  4. Load a watermark logo and place it onto the image
  5. Load a font file in order to bake text into the image
  6. Export the final image into an export directory.

Before exploring the script, let’s visit some considerations when working with image processing.

Consideration 1: Folder structure

With these kinds of tasks we need to make sure we do not overwrite original image files. For this reason, at a minimum, we should structure our project with at least 3 folders:

project_folder/
    raw/
       image1.jpg
       image2.jpg
       ...
   
    active/
    export/
    generate_image.js

A self explanatory but necessary procedure, separating raw images, active and completed exported image — just like you would not mix raw data with normalised feature data for a neural network in machine learning. The same principles apply here.

Consideration 2: External Image Libraries

Your client may not have their raw image files on their servers ready for you to manipulate — they may be on an external service, such as Dropbox, Google Drive or Amazon AWS. Well,this is not an issue — this actually saves us the task of separating raw files from our active and exported files. For completeness, here are the developer pages for those services:

Of course, you have the option to move your exported images to these services too. If you send the image byte data as you may do for Amazon S3, then your image file would not need to be publicly accessible over HTTP. But in the case you wish to copy an image from one URL to the other, then you will want your image to be accessed via an HTTP address, which leads me onto consideration 3.

Consideration 3: Public static folder with NodeJS Express

Express makes it extremely easy for us to set folders to be public. If I wanted to store all my exported images inside a static folder, I could firstly place it inside my root directory like so:

app/
   public
   static
   routes
   views
   app.js
   ...

And from here, edit my app.js file to create a route to this folder:

//development URL
http://localhost:3010/exported-images
//production URL
https://<your_domain>:3010/exported-images

You do not need to adhere to the name of the folder either — I can configure any URI I choose. Let’s say my server is running on port 3010; the URL to access this folder would be:

//development URL
http://localhost:3010/exported-images
//production URL
https://<your_domain>:3010/exported-images

As a final consideration, you may only want your images to be sitting inside a public folder as they are being copied to an external service, and to be deleted straight after the transfer takes place. Another consideration is to use a random string as the image name for added security.

Our Watermark and Text Jimp Script

With our considerations out of the way, let’s take a raw template and attach a logo and text onto it. The final image may resemble something like this: (note the centered watermark and copyright text at the bottom)

This is image title

The Script

Let’s visit how our Jimp script looks in its full implementation before breaking it down:

var Jimp = require('jimp');

//if you are following along, create the following 2 images relative to this script:
let imgRaw = 'raw/image1.png'; //a 1024px x 1024px backgroound image
let imgLogo = 'raw/logo.png'; //a 155px x 72px logo
//---

let imgActive = 'active/image.jpg';
let imgExported = 'export/image1.jpg';

let textData = {
  text: '© JKRB Investments Limited', //the text to be rendered on the image
  maxWidth: 1004, //image width - 10px margin left - 10px margin right
  maxHeight: 72+20, //logo height + margin
  placementX: 10, // 10px in on the x axis
  placementY: 1024-(72+20)-10 //bottom of the image: height - maxHeight - margin 
};

//read template & clone raw image 
Jimp.read(imgRaw)
  .then(tpl => (tpl.clone().write(imgActive)))

  //read cloned (active) image
  .then(() => (Jimp.read(imgActive)))

  //combine logo into image
  .then(tpl => (
    Jimp.read(imgLogo).then(logoTpl => {
      logoTpl.opacity(0.2);
      return tpl.composite(logoTpl, 512-75, 512, [Jimp.BLEND_DESTINATION_OVER, 0.2, 0.2]);
    });
  )

  //load font	
  .then(tpl => (
    Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => ([tpl, font]))
  ))
	
  //add footer text
  .then(data => {

    tpl = data[0];
    font = data[1];
  
    return tpl.print(font, textData.placementX, textData.placementY, {
      text: textData.text,
      alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
      alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
    }, textData.maxWidth, textData.maxHeight);
  })

  //export image
  .then(tpl => (tpl.quality(100).write(imgExported)))

  //log exported filename
  .then(tpl => { 
    console.log('exported file: ' + imgExported);
  })

  //catch errors
  .catch(err => {
    console.error(err);
  });

jimp-example.js

I like the progressive nature of this script, with the simplicity of our then() workflow that makes the code easy to read and follow. And because of this, there probably is not too much documentation to follow on from this script — but let’s visit some areas that may be of interest to us fellow Javascript developers.

Defining variables

All script variables are defined at the top of the script so as to make it more readable and easier to update. Everything that follows our let variables is pure functionality.

Cloning Raw and Opening Active Image

Jimp.read(imgRaw)
  .then(tpl => (tpl.clone().write(imgActive))) 
  .then(() => (Jimp.read(imgActive)))

We use Jimp.read() to effectively “open” an image file to start manipulating it. Jimp.read() is a Promise, which returns the image object to work with, named tpl.

With tpl at hand, we call tpl.clone().write(), duplicating the raw image file we just opened and saving it in our active/ directory.

Combining Watermark Image

.then(tpl => (
   Jimp.read(imgLogo).then(logoTpl => {
      logoTpl.opacity(0.2);
      return tpl.composite(
         logoTpl, 
          512-75, 
          512, 
          [Jimp.BLEND_DESTINATION_OVER]);
   });  
)

Within the following then() block, we call Jimp.read() once more to load our logo watermark. The opacity of the logo is changed firstly with logoTpl.opacity(), which does not require a Promise!

Because of this we then move onto placing the logoTpl image into our main tpl image, with tpl.composite(). The parameters here are quite straight forward, passing the logo itself, its x and y positions, followed by a blend mode. Here we just need the logo to be placed over the image, Jimp.BLEND_DESTINATION_OVER.

Note: Take a look at the Jimp Basic Methods section of NPMJS to explore more about composite and the range of methods the package offers.

We return the result of tpl.composite() to move onto our text placement.

Loading our Text Font

.then(tpl => (
   Jimp.loadFont(Jimp.FONT_SANS_32_WHITE
   .then(font => ([tpl, font]))  
))

Here we are doing 2 things — firstly loading Jimps’ built-in size 32 white Sans font, allowing us to use it in any tpl.print() calls we make later to bake text into the image.

The second is extending this Promise and returning an array for use in the next then() block. You see, the next then() block needs our main tpl image object, and our loaded font object. Since Javascript does not support tuples as such, we can simply return an array of the required objects.

Note: Check out Jimp’s Writing Text documentation to see everything about loading bitmap fonts and printing them in your images. The font conversion tools at the end are needed to convert your fonts to bitmap .fnt files - Hiero in particular is very useful. Remember, you can only export one size - colour combination for each font, therefore it is likely you will need to load multiple fonts into your image processing scripts.

The image files themselves are commonly PNG files, where you can further mask or change the font opacity.

Printing Text on Our Template

.then(data => {
   tpl = data[0];
   font = data[1];
   return tpl.print(
      font,
      textData.placementX, 
      textData.placementY, 
      {      
         text: textData.text,      
         alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,      
         alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE    
      }, 
      textData.maxWidth, 
      textData.maxHeight);  
})

Using our data array, we retreive the font and tpl objects, and call tpl.print() for adding text to our image.

Here the text is being added in the bottom center of the image. print takes our font object, x and y position, followed by an object defining the text itself with its alignments. maxWidth and maxHeight dictate how those alignments react in the image scene.

Exporting and Post Processing

.then(tpl => (tpl.quality(100).write(imgExported)))   
.then(tpl => {
   console.log('exported file: ' + imgExported);  
})
.catch(err => {
  console.error(err);
 });

With our last 2 then() blocks, we use tpl.quality().write() to export the image into our chosen export directory, and simply log that the process is finished. Handle any post processing here, including:

  • Resolving a Promise which this process may be hosted in
  • Returning the full URL of the image for an API response
  • Logging / storing this image record in a database
  • Delete your active file or uneeded leftovers (although in reality a supervisor script could be in charge of tidy-up operations)
  • Move onto another image processing job if more are queued up.

As you are a great Javascript programmer, the catch() clause will most likely not come in use — however let’s keep one there just in case! Handle any errors as you wish.

Where to go from here

This is just one use case with Jimp. Check out the full documentation on their NPMJS page if you are considering Jimp as your image processor of choice.

The project on Github can be found at https://github.com/oliver-moran/jimp.

#nodejs #javascript #Jimp

What is GEEK

Buddha Community

Image Processing in Node.js Using Jimp Library
Vincent Lab

Vincent Lab

1605178663

Image Processing in Node.js with Jimp

In this video, I will be showing you the powerful library Jimp for image manipulation in Node.js

#jimp #image manipulation #image editing #working with images #node.js #image processing

Vincent Lab

Vincent Lab

1605099941

Image Processing in Node.js with Jimp

In this video, I will be showing you the powerful library Jimp for image manipulation in Node.js

#image processing #node.js #jimp #image manipulation #working with images #javascript image manipulation program

Aria Barnes

Aria Barnes

1622719015

Why use Node.js for Web Development? Benefits and Examples of Apps

Front-end web development has been overwhelmed by JavaScript highlights for quite a long time. Google, Facebook, Wikipedia, and most of all online pages use JS for customer side activities. As of late, it additionally made a shift to cross-platform mobile development as a main technology in React Native, Nativescript, Apache Cordova, and other crossover devices. 

Throughout the most recent couple of years, Node.js moved to backend development as well. Designers need to utilize a similar tech stack for the whole web project without learning another language for server-side development. Node.js is a device that adjusts JS usefulness and syntax to the backend. 

What is Node.js? 

Node.js isn’t a language, or library, or system. It’s a runtime situation: commonly JavaScript needs a program to work, however Node.js makes appropriate settings for JS to run outside of the program. It’s based on a JavaScript V8 motor that can run in Chrome, different programs, or independently. 

The extent of V8 is to change JS program situated code into machine code — so JS turns into a broadly useful language and can be perceived by servers. This is one of the advantages of utilizing Node.js in web application development: it expands the usefulness of JavaScript, permitting designers to coordinate the language with APIs, different languages, and outside libraries.

What Are the Advantages of Node.js Web Application Development? 

Of late, organizations have been effectively changing from their backend tech stacks to Node.js. LinkedIn picked Node.js over Ruby on Rails since it took care of expanding responsibility better and decreased the quantity of servers by multiple times. PayPal and Netflix did something comparative, just they had a goal to change their design to microservices. We should investigate the motivations to pick Node.JS for web application development and when we are planning to hire node js developers. 

Amazing Tech Stack for Web Development 

The principal thing that makes Node.js a go-to environment for web development is its JavaScript legacy. It’s the most well known language right now with a great many free devices and a functioning local area. Node.js, because of its association with JS, immediately rose in ubiquity — presently it has in excess of 368 million downloads and a great many free tools in the bundle module. 

Alongside prevalence, Node.js additionally acquired the fundamental JS benefits: 

  • quick execution and information preparing; 
  • exceptionally reusable code; 
  • the code is not difficult to learn, compose, read, and keep up; 
  • tremendous asset library, a huge number of free aides, and a functioning local area. 

In addition, it’s a piece of a well known MEAN tech stack (the blend of MongoDB, Express.js, Angular, and Node.js — four tools that handle all vital parts of web application development). 

Designers Can Utilize JavaScript for the Whole Undertaking 

This is perhaps the most clear advantage of Node.js web application development. JavaScript is an unquestionable requirement for web development. Regardless of whether you construct a multi-page or single-page application, you need to know JS well. On the off chance that you are now OK with JavaScript, learning Node.js won’t be an issue. Grammar, fundamental usefulness, primary standards — every one of these things are comparable. 

In the event that you have JS designers in your group, it will be simpler for them to learn JS-based Node than a totally new dialect. What’s more, the front-end and back-end codebase will be basically the same, simple to peruse, and keep up — in light of the fact that they are both JS-based. 

A Quick Environment for Microservice Development 

There’s another motivation behind why Node.js got famous so rapidly. The environment suits well the idea of microservice development (spilling stone monument usefulness into handfuls or many more modest administrations). 

Microservices need to speak with one another rapidly — and Node.js is probably the quickest device in information handling. Among the fundamental Node.js benefits for programming development are its non-obstructing algorithms.

Node.js measures a few demands all at once without trusting that the first will be concluded. Many microservices can send messages to one another, and they will be gotten and addressed all the while. 

Versatile Web Application Development 

Node.js was worked in view of adaptability — its name really says it. The environment permits numerous hubs to run all the while and speak with one another. Here’s the reason Node.js adaptability is better than other web backend development arrangements. 

Node.js has a module that is liable for load adjusting for each running CPU center. This is one of numerous Node.js module benefits: you can run various hubs all at once, and the environment will naturally adjust the responsibility. 

Node.js permits even apportioning: you can part your application into various situations. You show various forms of the application to different clients, in light of their age, interests, area, language, and so on. This builds personalization and diminishes responsibility. Hub accomplishes this with kid measures — tasks that rapidly speak with one another and share a similar root. 

What’s more, Node’s non-hindering solicitation handling framework adds to fast, letting applications measure a great many solicitations. 

Control Stream Highlights

Numerous designers consider nonconcurrent to be one of the two impediments and benefits of Node.js web application development. In Node, at whatever point the capacity is executed, the code consequently sends a callback. As the quantity of capacities develops, so does the number of callbacks — and you end up in a circumstance known as the callback damnation. 

In any case, Node.js offers an exit plan. You can utilize systems that will plan capacities and sort through callbacks. Systems will associate comparable capacities consequently — so you can track down an essential component via search or in an envelope. At that point, there’s no compelling reason to look through callbacks.

 

Final Words

So, these are some of the top benefits of Nodejs in web application development. This is how Nodejs is contributing a lot to the field of web application development. 

I hope now you are totally aware of the whole process of how Nodejs is really important for your web project. If you are looking to hire a node js development company in India then I would suggest that you take a little consultancy too whenever you call. 

Good Luck!

Original Source

#node.js development company in india #node js development company #hire node js developers #hire node.js developers in india #node.js development services #node.js development

WebClues Infotech

WebClues Infotech

1616671994

Hire Dedicated Node.js Developers - Hire Node.js Developers

If you look at the backend technology used by today’s most popular apps there is one thing you would find common among them and that is the use of NodeJS Framework. Yes, the NodeJS framework is that effective and successful.

If you wish to have a strong backend for efficient app performance then have NodeJS at the backend.

WebClues Infotech offers different levels of experienced and expert professionals for your app development needs. So hire a dedicated NodeJS developer from WebClues Infotech with your experience requirement and expertise.

So what are you waiting for? Get your app developed with strong performance parameters from WebClues Infotech

For inquiry click here: https://www.webcluesinfotech.com/hire-nodejs-developer/

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated node.js developers #hire node.js developers #hire top dedicated node.js developers #hire node.js developers in usa & india #hire node js development company #hire the best node.js developers & programmers

I am Developer

1616903936

Node JS Resize Image Before Upload Example

Resize image before upload using multer, sharp with node js and express js. In this node js tutorial, you will learn how to resize image before upload using multer, sharp with node js and express js.

Image upload is the basic requirement of any application. So this example will guide you step by step on how to resize image before upload using multer in node js. And you can understand a concept of node js compress image before upload.

Node Express Resize Image Before Upload Tutorial Example

Step 1 - Create Node JS App

Step 2 - Install Express and Multer Dependencies

Step 3 - Import Dependencies in Server.js File

Step 4 - Create Server.js File

Step 5 - Create Form

Step 6 - Run Development Server

https://www.tutsmake.com/node-js-resize-image-before-upload-using-multer-sharp-example/

#how to upload multiple image in node js #resize image in nodejs #image processing in node js #node js image upload resize