Nodejsを使用して画像に半透明のウォーターマークを追加する方法の簡単な分析（方法の詳細な説明）

nodejs を使用して画像に透かしを追加するにはどうすればよいですか?以下の記事では、node を使用して画像に全ページ半透明の透かしを追加する方法を例を用いて紹介していますので、皆様のお役に立てれば幸いです。

#ミッドエンドおよびバックエンドプロジェクトのエクスポート機能として、通常、輸出トレーサビリティ機能が求められます。

エクスポートされたデータが画像の形式である場合、通常、この目的を達成するために画像に透かしが追加されます。

デモ

では、画像をエクスポートする前に、エクスポーターの ID として使用できる透かしを追加するにはどうすればよいでしょうか?まずは完成品を見てみましょう:

#上の元の画像はネットで偶然見つけた画像です、透かしを追加した後の効果は画像の通りです。

#ビジネス要件の分解#ここでは、このビジネス シナリオにおけるこの要件の 3 つの重要な点を考慮する必要があります。

#透かしは画像全体を覆う必要があります

元の画像を読みやすくするために、透かしテキストは半透明である必要があります
• 透かしテキストは鮮明で読みやすいものである必要があります

選択

私は node.js

サーバー上で上記の要件を実装する責任を負っているため、かなりの数のオプションがありますたとえば、 c lib imagemagick や他の人がパッケージ化したさまざまなノード透かしライブラリを直接使用するなどです。この記事では、

Jimp ライブラリのパッケージを使用することを選択します。 Jimp ライブラリの公式 github ページでは、次のように説明されています:

完全に JavaScript で書かれた Node 用の画像処理ライブラリで、ネイティブ依存関係はありません。

画像を操作するための多数の API を提供します

• #blit - 画像を別の画像にブリットします。
• #blur - 画像をすばやくぼかします。
• color - さまざまな色操作方法。
• contain - 高さと幅の範囲内に画像を含めます。
• cover - スケールを調整します。画像を指定した幅と高さになるようにアスペクト比を維持します。
• displace - ディスプレイスメント マップに基づいて画像を置き換えます
• dither - を適用します。画像にディザ効果を適用します。
• flip - 画像を x 軸または y 軸に沿って反転します。
• gaussian - ハードコア ブラー。
• invert - 画像の色を反転します
• #mask - ある画像を別の画像でマスクします。
• normalize -画像の色を正規化します。
#print
• - 画像にテキストを印刷します。#resize
- 画像のサイズを変更します。
• rotate
- 画像を回転します。
• scale
- 画像を一定の係数で均一に拡大縮小します。
で説明されているビジネスでは、この記事 このシナリオでは、一部の API のみを使用する必要があります。

設計と実装

入力パラメータの設計:

url: 元の画像の格納アドレス ( Jimp の場合 たとえば、リモート アドレスまたはローカル アドレスにすることができます)

textSize: 追加する必要があるウォーターマーク テキストのサイズ
• opacity: 透明度
• text: 追加する必要があるウォーターマークのテキスト
• dstPath: ウォーターマークを追加した後の出力画像のアドレス。アドレスはスクリプト実行ディレクトリの相対パスです。
• rotate: ウォーターマークの回転角度ウォーターマークのテキスト
• colWidth: ウォーターマークは回転できるため、テキストは画像として元の画像にオーバーレイされるため、ここでウォーターマーク画像の幅を定義します。デフォルトは 300 ピクセル
• rowHeight: 理由は上記と同じで、透かし画像の高さはデフォルトで 50 ピクセルです。 (追記：ここでの透かし画像のサイズは透かしテキストの間隔としておおよそ理解できます)
• したがって、このモジュールの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/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 教程！

以上がNodejsを使用して画像に半透明のウォーターマークを追加する方法の簡単な分析（方法の詳細な説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。