nodejs를 사용하여 이미지에 반투명 워터마크를 추가하는 방법에 대한 간략한 분석(자세한 방법 설명)

nodejs를 사용하여 이미지에 워터마크를 추가하는 방법은 무엇입니까? 다음 기사에서는 예제를 사용하여 node를 사용하여 이미지에 전체 페이지 반투명 워터마크를 추가하는 방법을 소개합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

중간 및 백엔드 프로젝트의 수출 기능으로 일반적으로 수출 추적 기능이 필요합니다.

내보낸 데이터가 사진 형식인 경우 일반적으로 이 목적을 달성하기 위해 사진에 워터마크가 추가됩니다.

DEMO

그렇다면 사진을 내보내기 전에 수출자의 신원으로 사용할 수 있는 워터마크를 어떻게 추가합니까? 먼저 완성품을 살펴보겠습니다.

위 원본 사진은 인터넷에서 우연히 발견한 사진입니다. 워터마크를 추가한 후의 효과는 사진과 같습니다.

비즈니스 요구 사항 분해

여기서 이 비즈니스 시나리오에서 이 요구 사항의 세 가지 핵심 사항을 고려해야 합니다.

• 워터마크는 전체 이미지를 덮어야 합니다.
• 워터마크 텍스트는 원본을 보장하기 위해 반투명해야 합니다. 이미지 가독성
• 워터마크 텍스트는 명확하고 읽기 쉬워야 합니다

Selection

저는 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：添加水印之后的输流图 Pictures 地址 ，地址为脚本执行目录的是路径
• rotate：水印文字 旋转角titude
• colWidth：因为可旋转的水印文字是印文字为一张图 Pictures 覆盖到原图上 ，因此这里义一下印图象宽，도 ，默认为300image素
• rowHeight：理由同上，水印图picturesativehightitude，默认为50image素。

因此在该模块的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不能直接将文本旋转一定角titude ，因此我们需要根据水印文本生成 새로운 이미지 二进 제조유，并将其旋转。最终以这个新生成的图 Images 作为真 정적 水印添加到원원사진상。下면是生成水印图文 函数定义：

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!