Analisis ringkas tentang cara menambah tera air lut sinar pada imej menggunakan nodejs (penjelasan terperinci kaedah)

Bagaimana untuk menambah tera air pada imej menggunakan nodejs? Artikel berikut menggunakan contoh untuk memperkenalkan cara menggunakan nod untuk menambahkan tera air lut sinar halaman penuh pada imej saya harap ia akan membantu semua orang.

Sebagai fungsi eksport projek pertengahan dan belakang, anda biasanya dikehendaki mempunyai keupayaan kebolehkesanan eksport.

Apabila data yang dieksport adalah dalam bentuk gambar, tera air biasanya ditambahkan pada gambar untuk mencapai tujuan ini.

DEMO

Jadi bagaimana anda menambah tera air yang boleh digunakan sebagai identiti pengeksport sebelum mengeksport gambar? Mari kita lihat produk siap dahulu:

Gambar asal di atas adalah gambar yang saya temui secara rawak dalam talian Kesan selepas menambah tera air adalah seperti yang ditunjukkan dalam gambar.

Penguraian keperluan perniagaan

Di sini kita perlu mempertimbangkan tiga perkara utama keperluan ini di bawah senario perniagaan ini:

• Tanda air perlu meliputi keseluruhan imej
• Teks tera air hendaklah lut sinar untuk memastikan kebolehbacaan imej asal
• Teks tera air hendaklah jelas dan boleh dibaca

Pemilihan

Memandangkan saya bertanggungjawab untuk melaksanakan keperluan di atas pada pelayan node.js, terdapat beberapa pilihan , seperti menggunakannya secara langsung c lib imagemagick atau pelbagai perpustakaan penanda air nod yang telah dibungkus oleh orang lain. Dalam artikel ini, kami akan memilih untuk menggunakan pembungkus perpustakaan Jimp.

Halaman github rasmi pustaka Jimp menerangkan dirinya seperti ini:

Pustaka pemprosesan imej untuk Node yang ditulis sepenuhnya dalam JavaScript, dengan sifar kebergantungan asli.

Dan menyediakan sejumlah besar API untuk mengendalikan imej

• blit - Pancarkan imej pada imej lain.
• kaburkan - Kaburkan imej dengan cepat.
• warna - Pelbagai kaedah manipulasi warna.
• mengandungi - Mengandungi imej dalam ketinggian dan lebar.
• tutup - Skalakan imej supaya lebar dan tinggi yang diberikan mengekalkan nisbah bidang.
• anjakan - Anjakan imej berdasarkan peta anjakan
• dither - Gunakan a kesan gementar pada imej.
• terbalikkan - Terbalikkan imej di sepanjang paksi x atau y.
• gaussian - Kabur tegar.
• terbalikkan - Terbalikkan warna imej
• topeng - Topeng satu imej dengan imej yang lain.
• normalkan - Normalisasi warna dalam imej
• cetak - Cetak teks pada imej
• saiz semula - Ubah saiz imej.
• putar - Putar imej.
• skala - Skala imej mengikut faktor secara seragam.

在本文所述的业务场景中，我们只需使用其中部分API即可。

设计和实现

URL水印文字大小

opacity：透明度

• teks：需要添加的水印文字
• dstPath：添加水印本之后的输出图片地址，地加水印本之后的输出图片地址，地加水印本之后的输出图片地址，地加蝀，地加址对路径
• putar：水印文字的旋转角度
• colWidth：因为可旋转的水印文字是作为一张图片覆盖到原图上的，因此候一之的，因此耙义一之宽度，默认为300像素
• rowHeight：理由同上，水印图片的高度，默认为50像素。（PS：这里的水印图片尺寸可以大致理解为水印的量>
因此在该模块的coverTextWatermark函数中对外暴露以上参数即可
• coverTextWatermark

textWatermark

Jimp不能直接将文本旋将文本旋幬转原图片上|正的水印添加到原图片上。下面是生成水印图片的函数定义：

/**
 * @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 教程！

Atas ialah kandungan terperinci Analisis ringkas tentang cara menambah tera air lut sinar pada imej menggunakan nodejs (penjelasan terperinci kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!