The introduction

Image watermarking is widely used in daily life. For example, images published by “we Media” will be watermarked to prevent the content from being transferred to other platforms. Real-name id card photos will be watermarked “for use only as XXX” to prevent the id card from being abused. This article introduces how to use NodeJS to generate watermarks for images from scratch. This article will be published in the toolkit.

One step at a time

Watermarking is actually to edit the picture, need to use the three-party library – JIMP, jimP is called “JavaScript image editing software”. Add jimp dependencies to package.json and introduce them into your project.

{" name ":" nodejs - the console - app1 ", "main" : "app. Js", "dependencies" : {" jimp ":" 0.16.1 "}}Copy the code

&emps; Jimp includes two steps to add watermark: 1. Read the image to be added watermark. 2. Add a watermark. The code is as follows:

'use strict'; Var jimp = require('jimp'); let sourceImage; Jimp.read ("H:\ TMP \12.jpg"). Then (image => {sourceImage = image; Return jimp.loadFont(jimp.FONT_SANS_64_BLACK); Print (font, 10, 10, "Lin test").write("H:\\ TMP \\12_water.jpg"); //10 represents the starting coordinates of the watermark, the origin is the upper left corner})Copy the code

Careful friends have noticed that before adding watermarks, fonts need to be loaded. Jimp has a built-in black and white open Sans font ranging from 8px to 128px, and it also supports bitmap font files. Note: The built-in font does not support Chinese!

Frequent users of watermarks may have noticed that the text is usually translucent and does not cover the original image. The above example doesn’t quite fit the bill. Translucent watermarking can be achieved through translucent fonts or image composition. The code is as follows:

'use strict'; Var jimp = require('jimp'); let sourceImage; Jimp.read ("H:\ TMP \4.jpg"). Then (image => {sourceImage = image; Return jimp.loadFont(jimp.FONT_SANS_64_BLACK); }). Then (the font = > {/ / initializes a transparency for 0 let textImage = new jimp (sourceImage. Bitmap. Width, sourceImage. Bitmap. Height, 0 x0); Textimage. print(font, 10, 10, "Lin test"). Composite (sourceImage, 0, 0, {mode: BLEND_MULTIPLY, opacitySource: 1, opacityDest: 0.3}). Write ("H:\\ TMP \\4_water.jpg"); })Copy the code

Usually, the watermark will have multiple lines, and the image height and watermark height need to be calculated to determine the number of lines. The code is as follows:

'use strict'; Var jimp = require('jimp'); let sourceImage; Jimp.read ("H:\ TMP \\6.jpg"). Then (image => {sourceImage = image; Return jimp.loadFont(jimp.FONT_SANS_64_BLACK); }). Then (the font = > {/ / initializes a transparency for 0 let textImage = new jimp (sourceImage. Bitmap. Width, sourceImage. Bitmap. Height, 0 x0); // Calculate watermark height let textHeight = jimP. measureTextHeight(font, "Lin test"); / / calculate number of lines, pay attention to the watermark height from 10 let rowNum = math.h floor ((sourceImage. Bitmap. Height - 10)/textHeight) for (let I = 0; i < rowNum; ++i) { textImage.print(font, 10, 10 + i * textHeight, "lin test"); } // Composite (sourceImage, 0, 0, {mode: jimp.BLEND_MULTIPLY, opacitySource: 1, opacityDest: 0.3}). Write (" H: \ \ TMP \ \ 6 _water. JPG "); })Copy the code

summary

There are still two problems of watermark generation to be introduced in the next issue. 1. Chinese. 2. 45° oblique watermark. Stay tuned!