业务背景

作为中后盾我的项目的导出性能，通常会被要求具备导出的追溯能力。

当导出的数据状态为图片时，个别会为图片增加水印以达到此目标。

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);});