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

Posted 2022-02-02 栏观科技

引言

 图片加水印在生活中应用广泛，比如自媒体发布的图片都会带上水印，防止内容被搬运到其他平台；实名认证的身份证照片，会加上“仅作为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°斜水印。敬请期待！