Une brève analyse de la façon d'ajouter des filigranes translucides aux images à l'aide de nodejs (explication détaillée de la méthode)

Comment ajouter un filigrane aux images à l'aide de nodejs ? L'article suivant utilise des exemples pour présenter comment utiliser node pour ajouter des filigranes translucides pleine page aux images. J'espère que cela sera utile à tout le monde !

En tant que fonction d'exportation des projets mid-end et back-end, nous sommes généralement tenus de disposer de capacités de traçabilité des exportations.

Lorsque les données exportées sont sous forme d'images, des filigranes sont généralement ajoutés aux images pour atteindre cet objectif.

DEMO

Alors, comment ajouter un filigrane pouvant être utilisé comme identité de l'exportateur avant d'exporter une photo ? Jetons d'abord un coup d'œil au produit fini :

L'image originale ci-dessus est une image que j'ai trouvée au hasard en ligne. L'effet après l'ajout du filigrane est celui indiqué sur l'image.

Décomposition des exigences commerciales

Ici, nous devons considérer trois points clés de cette exigence dans ce scénario commercial :

• Le filigrane doit couvrir toute l'image
• Le texte du filigrane doit être translucide pour garantir l'original image La lisibilité
• Le texte du filigrane doit être clair et lisible

Sélection

Comme je suis responsable de la mise en œuvre des exigences ci-dessus sur un serveur node.js, il existe de nombreuses options, telles que directement en utilisant c lib imagemagick ou diverses bibliothèques de filigranes de nœuds qui ont été packagées par d'autres. Dans cet article, nous choisirons d'utiliser un wrapper de la bibliothèque Jimp.

La page github officielle de la bibliothèque Jimp se décrit comme suit :

Une bibliothèque de traitement d'images pour Node écrite entièrement en JavaScript, avec zéro dépendance native.

Et fournit de nombreuses API pour exploiter les images

• blit - Blit une image sur une autre.
• blur - Brouiller rapidement une image.
• color - Diverses méthodes de manipulation des couleurs.
• contain - Contenir une image dans une hauteur et une largeur.
• cover - Redimensionnez l'image de manière à ce que la largeur et la hauteur données conservent le rapport hauteur/largeur.
flip
• - Retourner une image le long de son axe x ou y.
gaussian
• - Flou hardcore.
invert
• - Inverser les couleurs d'une image
mask
• - Masquer une image avec une autre.
normaliser
• - Normaliser les couleurs d'une image
imprimer
• - Imprimer du texte sur une image
redimensionner
• - Redimensionner une image.
rotate
• - Faire pivoter une image.
scale
• - Redimensionne uniformément l'image d'un factor.
• input 参数设计：
url: 原图片的存储地址（对于Jimp来说，可以是远程地址，也可以是本地地址）
• textSize: 需添加的水印文字大小
opacity：透明度

text：需要添加的水印文字

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

rotate：水印文字的旋转角度colWidth：因为可旋转的水印文字是作为一张图印原图上的，因此这里定义一下水印图的宽度， 默认为300像素

rowHeight：理由同上，水印图片的高度，默认为为50像素。（PS：这里的水印图片尺寸可以大致理解为水印文字的间隔）

因此在该模块的coverTextWatermark函数中Description du produit度，并写到原图片上，因此我们需要根据水印文本生成新的图片二进制流，并将下面是生成水印图片的函数定义：

• /**
   * @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;
    }
  }

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!