业务背景,作为中后台项目的导出功能,通常要求具有导出的溯源性。当导出的数据为图片形式时,一般会在图片中添加水印来达到这一目的。DEMO那么如何在导出图片前添加水印作为导出者的身份呢?先来看成品:上图原图是我在网上随便找的一张图,加了水印后的效果如图。业务需求分解这里我们需要考虑这个业务场景下这个需求的三个要点:水印需要覆盖整张图片,水印文字要半透明,保证原图的可读性。水印文本应清晰易读。我也负责在一台nodejs服务器上实现上述需求。选项还是挺多的,比如直接用clibimagemagick或者别人封装好的各种节点水印库。在本文中,我们将选择使用Jimp库的包装器。Jimp库的官方github页面是这样描述自己的:一个完全用JavaScript编写的Node图像处理库,具有零本地依赖性。并且它提供了大量用于操作图像的APIblit-将图像Blit到另一个图像上。blur-快速模糊图像。color-各种颜色操作方法。contain-在高度和宽度内包含图像。cover-缩放图像以便保持宽高比的给定宽度和高度。置换-基于置换贴图置换图像抖动-对图像应用抖动效果。翻转-沿其x或y轴翻转图像。高斯-硬核模糊。反转-反转图像imagescolorsmask-用另一个图像遮盖一个图像。normalize-标准化图像中的颜色print-将文本打印到图像上resize-调整图像大小。rotate-旋转图像。scale-按一个因子均匀缩放图像。在本文描述的业务场景中,我们只需要使用其中的部分API即可。设计实现输入参数设计:url:原图的存储地址(对于Jimp,可以是远程地址,也可以是本地地址)textSize:要添加的水印文字的大小opacity:透明度text:水印文字待添加dstPath:添加水印后输出图片的地址,该地址为脚本执行目录的相对路径一张图片,所以这里定义了水印图片的宽度,默认为300像素rowHeight:道理同上,水印图片的高度,默认为50像素。(PS:这里水印图片的大小可以大致理解为水印文字的间隔)因此,可以在本模块的coverTextWatermark函数中将上述参数暴露给外部coverTextWatermark/***@param{String}mainImage-要加水印的图片路径*@param{Object}options*@param{String}options.text-要加水印的字符串*@param{Number}options.textSize-文本大小,范围从1到8*@param{String}options.dstPath-导出图片的目标路径*@param{Number}options.rotate-文本旋转范围从1到360*@param{Number}options.colWidth-文本水印列宽*@param{Number}options.rowHeight-文本水印行高*/module.exports.coverTextWatermark=async(mainImage,options)=>{try{options=checkOptions(options);constmain=awaitJimp.read(mainImage);constwatermark=awaittextWatermark(options.text,options);常量positionList=calculatePositionList(main,watermark)for(leti=0;i
