Eine kurze Analyse, wie man mit NodeJS transparente Wasserzeichen zu Bildern hinzufügt (detaillierte Erläuterung der Methode)

Wie füge ich mit NodeJS Wasserzeichen zu Bildern hinzu? Der folgende Artikel stellt anhand von Beispielen vor, wie man mit node ganzseitige durchscheinende Wasserzeichen zu Bildern hinzufügt. Ich hoffe, dass er für alle hilfreich ist!

Als Exportfunktion von Mid- und Back-End-Projekten müssen wir normalerweise über Funktionen zur Rückverfolgbarkeit des Exports verfügen.

Wenn die exportierten Daten in Form von Bildern vorliegen, werden den Bildern im Allgemeinen Wasserzeichen hinzugefügt, um diesen Zweck zu erreichen.

DEMO

Wie fügt man also ein Wasserzeichen hinzu, das als Identität des Exporteurs verwendet werden kann, bevor man ein Bild exportiert? Schauen wir uns zunächst das fertige Produkt an:

Das Originalbild oben ist ein Bild, das ich zufällig online gefunden habe. Der Effekt nach dem Hinzufügen des Wasserzeichens ist wie im Bild gezeigt.

Zerlegung von Geschäftsanforderungen

Hier müssen wir drei Schlüsselpunkte dieser Anforderung in diesem Geschäftsszenario berücksichtigen:

• Das Wasserzeichen muss das gesamte Bild abdecken
• Der Wasserzeichentext muss durchscheinend sein, um das Original sicherzustellen Bild Die Lesbarkeit
• Der Wasserzeichentext sollte klar und lesbar sein

Auswahl

Da ich für die Umsetzung der oben genannten Anforderungen auf einem node.js-Server verantwortlich bin, gibt es einige Optionen, wie z direkt mit c lib imagemagick oder verschiedenen Knoten-Wasserzeichenbibliotheken, die von anderen gepackt wurden. In diesem Artikel entscheiden wir uns für die Verwendung eines Wrappers für die Jimp-Bibliothek.

Die offizielle Github-Seite der Jimp-Bibliothek beschreibt sich selbst wie folgt:

Eine Bildverarbeitungsbibliothek für Node, die vollständig in JavaScript geschrieben ist, ohne native Abhängigkeiten.

Und bietet zahlreiche APIs für die Bedienung von Bildern

• blit – Ein Bild auf ein anderes übertragen.
• blur – Ein Bild schnell verwischen.
• color – Verschiedene Farbmanipulationsmethoden.
• contain – Ein Bild innerhalb einer Höhe und Breite enthalten.
• cover – Skaliert das Bild so, dass es die angegebene Breite und Höhe einhält, wobei das Seitenverhältnis erhalten bleibt.
• displace – Verschiebt das Bild basierend auf einer Verschiebungskarte
• dither – Wendet einen Dither-Effekt auf ein Bild an.
• Flip – Ein Bild entlang seiner X- oder Y-Achse spiegeln.
• Gaussian – Hardcore-Unschärfe.
• Invertieren – Die Farben eines Bildes umkehren
• Maske – Ein Bild mit einem anderen maskieren.
• Normalisieren - Normalisieren Sie die Farben in einem Bild.
• Drucken Faktor
• input 参数设计：
• url: 原图片的存储地址（对于Jimp来说，可以是远程地址，也可以是本地地址）textSize: 需添加的水印文字大小
• opacity：透明度text:需要添加的水印文字

dstPath:添加水印之后的输出图片地址，地址为脚本执行目录的相对路径

rotate：水印文字的旋转角度

colWidth：因为可旋因此这里定义一下水印图片的宽度300 像素rowHeight: 300 像素, 50 像素以大致理解为水印文字的间隔）

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

  Nach dem Login kopieren
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
}

Nach dem Login kopieren
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
}

Nach dem Login kopieren

如上代码所示，我们使用一个二维数组记录所有水印图片需出现在原图上的坐标列表。

总结

至此，关于使用Jimp为图片添加文字水印的所有主要功能就都讲解到了。

github地址：https://github.com/swearer23/jimp-fullpage-watermark

npm：npm i jimp-fullpage-watermark

Inspiration 致谢

https://github.com/sushantpaudel/jimp-watermark

https://github.com/luthraG/image-watermark

https://medium.com/@rossbulat/image-processing-in-nodejs-with-jimp-174f39336153

示例代码：

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

Nach dem Login kopieren

更多node相关知识，请访问：nodejs 教程！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man mit NodeJS transparente Wasserzeichen zu Bildern hinzufügt (detaillierte Erläuterung der Methode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!