Home > Web Front-end > JS Tutorial > How to add watermark to images using Node.js

How to add watermark to images using Node.js

高洛峰
Release: 2017-02-04 10:20:46
Original
2048 people have browsed it

1. Preparation:

First, make sure you have installed the node environment locally.

Then, we need to use a Node.js library for image editing operations: images.

The address of this library is: https://github.com/zhangyuanwei/node-images. The author defines it as "Node.js lightweight cross-platform image encoding and decoding library" and provides a series of interface.

The first thing we need to do is to install the images library:

npm install images

Second, go directly to the DEMO:

The steps are as follows:

step1: Folder structure

How to add watermark to images using Node.js

step2: JS code

var images = require('images');
var path = require('path');
var watermarkImg = images('water_logo.png');
var sourceImg = images('source.png');
// 比如放置在右下角,先获取原图的尺寸和水印图片尺寸
var sWidth = sourceImg.width();
var sHeight = sourceImg.height();
var wmWidth = watermarkImg.width();
var wmHeight = watermarkImg.height();
images(sourceImg)
// 设置绘制的坐标位置,右下角距离 40px
.draw(watermarkImg, sWidth - wmWidth - 40, sHeight - wmHeight - 40)
// 保存格式会自动识别
.save('saveimg.png');
Copy after login

step3: Run node app Command

How to add watermark to images using Node.js

step4: After running the node command, the folder structure is as shown below

How to add watermark to images using Node.js

step5: The final generated watermark Picture

How to add watermark to images using Node.js

The above is the method introduced by the editor to add watermark to pictures using Node.js. I hope it will be useful to everyone. For help, if you have any questions please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on how to add watermarks to images using Node.js, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template