nodejs编程实战之图片水印生成（一）

2023-08-21 04:39| 来源: 网络整理| 查看: 265

引言

图片加水印在生活中应用广泛，比如自媒体发布的图片都会带上水印，防止内容被搬运到其他平台；实名认证的身份证照片，会加上“仅作为XXX使用”的水印，防止身份证被滥用。本文从零开始介绍如何用nodejs为图片生成水印，本文的功能会发布到小编的小程序—“工具百宝箱”，欢迎拍砖。

一步一个脚印

加水印实际是对图片进行编辑，需要用到三方库—jimp，jimp全称为“JavaScript 图像编辑软件”。在package.json里面加入jimp依赖，将它引入到项目中。

{ "name": "nodejs-console-app1", "main": "app.js", "dependencies": { "jimp": "0.16.1" } }

&emps;jimp添加水印分为两个步骤：1. 读取需要添加水印的图片。2. 添加水印。代码如下：

'use strict'; //引入jimp var jimp = require('jimp'); let sourceImage; //读取原图 jimp.read("H:\\tmp\\12.jpg").then(image => { sourceImage = image; //加载水印字体 return jimp.loadFont(jimp.FONT_SANS_64_BLACK); }).then(font => { //生成水印并保存 sourceImage.print(font, 10, 10, "lin test") .write("H:\\tmp\\12_water.jpg");//10表示水印开始的坐标，原点为左上角 })

在这里插入图片描述

细心的小伙伴已经发现了，在添加水印之前需要加载字体。jimp内置黑白两色从8px~128px的open sans字体，同时它也支持bitmap类型的字体文件。注意：内置字体不支持中文！

经常使用水印的小伙伴可能注意到，水印文字一般是半透明的，不会盖住原图。上面的例子不太符合要求。半透明水印可以通过半透明字体实现，也可以通过图片合成来实现。代码如下：

'use strict'; //引入jimp 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(font => { //初始化一个透明度为0的图片 let textImage = new jimp(sourceImage.bitmap.width, sourceImage.bitmap.height, 0x0); //生成水印 textImage.print(font, 10, 10, "lin test") .composite(sourceImage, 0, 0, { mode: jimp.BLEND_MULTIPLY, opacitySource: 1, opacityDest: 0.3 }).write("H:\\tmp\\4_water.jpg"); })

在这里插入图片描述

通常，水印会有多行，这时需要计算图片高度和水印高度来决定行数。代码如下：

'use strict'; //引入jimp 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(font => { //初始化一个透明度为0的图片 let textImage = new jimp(sourceImage.bitmap.width, sourceImage.bitmap.height, 0x0); //计算水印高度 let textHeight = jimp.measureTextHeight(font, "lin test"); //计算行数，注意水印高度从10开始 let rowNum = Math.floor((sourceImage.bitmap.height - 10) / textHeight) for (let i = 0; i < rowNum; ++i) { textImage.print(font, 10, 10 + i * textHeight, "lin test"); } //生成水印 textImage.composite(sourceImage, 0, 0, { mode: jimp.BLEND_MULTIPLY, opacitySource: 1, opacityDest: 0.3 }).write("H:\\tmp\\6_water.jpg"); })

在这里插入图片描述

小结

水印生成还有两个问题留在下一期介绍，1. 中文。2. 45°斜水印。敬请期待！

【本文地址】

公司简介

联系我们