共计 3673 个字符，预计需要花费 10 分钟才能阅读完成。
业务背景
作为中后盾我的项目的导出性能，通常会被要求具备导出的追溯能力。
当导出的数据状态为图片时，个别会为图片增加水印以达到此目标。
DEMO
那么在导出图片前如何为其增加上能够作为导出者身份辨认的水印呢？先看成品：
上图原图为我轻易在网上找的一张图片，增加水印之后的成果如图所示。
业务需要合成
这里咱们须要思考在此业务场景之下，这个需要的三个要点：
- 水印须要铺满整个图片
- 水印文字成半透明状，保障原图的可读性
- 水印文字应清晰可读
选型
如我一样负责在一个 nodejs server 上实现以上需要，可选项相当多，比方间接应用 c lib imagemagick 或者已有人封装的各种 node watermarking 库。在本文中，咱们将抉择应用对 Jimp 库的封装。
Jimp 库的官网 github 页面上这样形容它本人：
An image processing library for Node written entirely in JavaScript, with zero native dependencies.
并且提供为数众多的操作图片的 API
- blit – Blit an image onto another.
- blur – Quickly blur an image.
- color – Various color manipulation methods.
- contain – Contain an image within a height and width.
- cover – Scale the image so the given width and height keeping the aspect ratio.
- displace – Displaces the image based on a displacement map
- dither – Apply a dither effect to an image.
- flip – Flip an image along it’s x or y axis.
- gaussian – Hardcore blur.
- invert – Invert an images colors
- mask – Mask one image with another.
- normalize – Normalize the colors in an image
- print – Print text onto an image
- resize – Resize an image.
- rotate – Rotate an image.
- scale – Uniformly scales the image by a factor.
在本文所述的业务场景中，咱们只需应用其中局部 API 即可。
设计和实现
input 参数设计：
- url: 原图片的存储地址（对于 Jimp 来说，能够是近程地址，也能够是本地地址）
- textSize: 需增加的水印文字大小
- opacity：透明度
- text：须要增加的水印文字
- dstPath：增加水印之后的输入图片地址，地址为脚本执行目录的相对路径
- rotate：水印文字的旋转角度
- colWidth：因为可旋转的水印文字是作为一张图片笼罩到原图上的，因而这里定义一下水印图片的宽度，默认为 300 像素
- rowHeight：理由同上，水印图片的高度，默认为 50 像素。（PS：这里的水印图片尺寸能够大抵了解为水印文字的距离）
因而在该模块的 coverTextWatermark 函数中对外裸露以上参数即可
coverTextWatermark
/**
* @param {String} mainImage - Path of the image to be watermarked
* @param {Object} options
* @param {String} options.text - String to be watermarked
* @param {Number} options.textSize - Text size ranging from 1 to 8
* @param {String} options.dstPath - Destination path where image is to be exported
* @param {Number} options.rotate - Text rotate ranging from 1 to 360
* @param {Number} options.colWidth - Text watermark column width
* @param {Number} options.rowHeight- Text watermark row height
*/
module.exports.coverTextWatermark = async (mainImage, options) => {
try {options = checkOptions(options);
const main = await Jimp.read(mainImage);
const watermark = await textWatermark(options.text, options);
const positionList = calculatePositionList(main, watermark)
for (let i =0; i < positionList.length; i++) {const coords = positionList[i]
main.composite(watermark,
coords[0], coords[1] );
}
main.quality(100).write(options.dstPath);
return {
destinationPath: options.dstPath,
imageHeight: main.getHeight(),
imageWidth: main.getWidth(),};
} catch (err) {throw err;}
}textWatermark
Jimp 不能间接将文本旋转肯定角度，并写到原图片上，因而咱们须要依据水印文本生成新的图片二进制流，并将其旋转。最终以这个新生成的图片作为真正的水印增加到原图片上。上面是生成水印图片的函数定义：
const textWatermark = async (text, options) => {const image = await new Jimp(options.colWidth, options.rowHeight, '#FFFFFF00');
const font = await Jimp.loadFont(SizeEnum[options.textSize])
image.print(font, 10, 0, {
text,
alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
},
400,
50)
image.opacity(options.opacity);
image.scale(3)
image.rotate(options.rotation)
image.scale(0.3)
return image
}calculatePositionList
到目前为止原图有了，水印图片也有了，如果想达到铺满原图的水印成果，咱们还须要计算出水印图片应该在哪些坐标上画在原图上，能力达成水印铺满原图的目标。
const calculatePositionList = (mainImage, watermarkImg) => {const width = mainImage.getWidth()
const height = mainImage.getHeight()
const stepWidth = watermarkImg.getWidth()
const stepHeight = watermarkImg.getHeight()
let ret = []
for(let i=0; i < width; i=i+stepWidth) {for (let j = 0; j < height; j=j+stepHeight) {ret.push([i, j])
}
}
return ret
}如上代码所示，咱们应用一个二维数组记录所有水印图片需呈现在原图上的坐标列表。
总结
至此，对于应用 Jimp 为图片增加文字水印的所有次要性能就都解说到了。
github 地址：https://github.com/swearer23/…
npm：npm i jimp-fullpage-watermark
Inspiration 致谢
https://github.com/sushantpau…
https://github.com/luthraG/im…
Image Processing in NodeJS with Jimp – Medium
示例代码：
var watermark = require('jimp-fullpage-watermark');
watermark.coverTextWatermark('./img/main.jpg', {
textSize: 5,
opacity: 0.5,
rotation: 45,
text: 'watermark test',
colWidth: 300,
rowHeight: 50
}).then(data => {console.log(data);
}).catch(err => {console.log(err);
});
