nodejs编程实战之图片水印生成
Posted 栏观科技
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nodejs编程实战之图片水印生成相关的知识,希望对你有一定的参考价值。
引言
图片加水印在生活中应用广泛,比如自媒体发布的图片都会带上水印,防止内容被搬运到其他平台;实名认证的身份证照片,会加上“仅作为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°斜水印。敬请期待!
以上是关于nodejs编程实战之图片水印生成的主要内容,如果未能解决你的问题,请参考以下文章