如何用nodejs給圖片添加半透明水印

本文小編為大家詳細(xì)介紹“如何用nodejs給圖片添加半透明水印”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何用nodejs給圖片添加半透明水印”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

作為中后臺(tái)項(xiàng)目的導(dǎo)出功能，通常會(huì)被要求具備導(dǎo)出的追溯能力。

當(dāng)導(dǎo)出的數(shù)據(jù)形態(tài)為圖片時(shí)，一般會(huì)為圖片添加水印以達(dá)到此目的。

DEMO

那么在導(dǎo)出圖片前如何為其添加上可以作為導(dǎo)出者身份識(shí)別的水印呢？先看成品：

上圖原圖為我隨便在網(wǎng)上找的一張圖片，添加水印之后的效果如圖所示。

業(yè)務(wù)需求分解

這里我們需要考慮在此業(yè)務(wù)場(chǎng)景之下，這個(gè)需求的三個(gè)要點(diǎn)：

• 水印需要鋪滿整個(gè)圖片

• 水印文字成半透明狀，保證原圖的可讀性

• 水印文字應(yīng)清晰可讀

選型

如我一樣負(fù)責(zé)在一個(gè)node.js server上實(shí)現(xiàn)以上需求，可選項(xiàng)相當(dāng)多，比如直接使用c lib imagemagick或者已有人封裝的各種node watermarking庫。在本文中，我們將選擇使用對(duì)Jimp庫的封裝。

Jimp 庫的官方github頁面上這樣描述它自己：

An image processing library for Node written entirely in JavaScript, with zero native dependencies.

并且提供為數(shù)眾多的操作圖片的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.

在本文所述的業(yè)務(wù)場(chǎng)景中，我們只需使用其中部分API即可。

設(shè)計(jì)和實(shí)現(xiàn)

input 參數(shù)設(shè)計(jì)：

• url: 原圖片的存儲(chǔ)地址（對(duì)于Jimp來說，可以是遠(yuǎn)程地址，也可以是本地地址）

• textSize: 需添加的水印文字大小

• opacity：透明度

• text：需要添加的水印文字

• dstPath：添加水印之后的輸出圖片地址，地址為腳本執(zhí)行目錄的相對(duì)路徑

• rotate：水印文字的旋轉(zhuǎn)角度

• colWidth：因?yàn)榭尚D(zhuǎn)的水印文字是作為一張圖片覆蓋到原圖上的，因此這里定義一下水印圖片的寬度，默認(rèn)為300像素

• rowHeight：理由同上，水印圖片的高度，默認(rèn)為50像素。（PS：這里的水印圖片尺寸可以大致理解為水印文字的間隔）

因此在該模塊的coverTextWatermark函數(shù)中對(duì)外暴露以上參數(shù)即可

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不能直接將文本旋轉(zhuǎn)一定角度，并寫到原圖片上，因此我們需要根據(jù)水印文本生成新的圖片二進(jìn)制流，并將其旋轉(zhuǎn)。最終以這個(gè)新生成的圖片作為真正的水印添加到原圖片上。下面是生成水印圖片的函數(shù)定義：

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

到目前為止原圖有了，水印圖片也有了，如果想達(dá)到鋪滿原圖的水印效果，我們還需要計(jì)算出水印圖片應(yīng)該在哪些坐標(biāo)上畫在原圖上，才能達(dá)成水印鋪滿原圖的目的。

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
}

如上代碼所示，我們使用一個(gè)二維數(shù)組記錄所有水印圖片需出現(xiàn)在原圖上的坐標(biāo)列表。

示例代碼：

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

讀到這里，這篇“如何用nodejs給圖片添加半透明水印”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。