Nodejs에서 GM 원형 자르기 및 그림 합성 사용

Nodejs에서의 이미지 처리에 관해서 가장 먼저 떠오르는 것은 gm입니다. gm의 맨 아래 레이어는 GraphicsMagic(실제로는 gm의 기원임) 또는 ImageMagick(사실 GraphicsMagic 자체도 ImageMagic에서 분리되었습니다)일 수 있습니다. 지금은 독립했습니다.) 이 두 도구 자체는 js 구현이 아니기 때문에 추가 설치가 필요하지만 이 도구는 매우 일반적이며 Linux 시스템에 미리 설치되어 있을 수도 있고 설치도 매우 편리하므로 따로 줄 필요가 없습니다. 단지 "제3자"이기 때문입니다. 이 두 소프트웨어는 최하층에 불과해 크게 걱정할 필요는 없지만, 실제로 GraphicsMagic을 사용해야 한다고 저자가 판단했기 때문에 여기서는 GraphicsMagics의 설치 및 사용법만 소개하겠습니다. 이 글은 주로 Nodejs에서 GM 원형 자르기와 사진 합성을 사용하는 예시를 소개합니다. 도움이 되길 바랍니다.

GaphicsMagic 설치

GraphicsMagic 공식 웹사이트는 http://www.graphicsmagick.org/

공식 웹사이트와 온라인의 대부분의 튜토리얼은 컴파일 방법을 가르쳐 주지만 개인적으로는 소프트웨어를 통해 직접 설치할 수 있다고 생각합니다.

와 같은 라이브러리

apt-get install graphicsmagic

gm 설치 Nodejs

gm은 노드 라이브러리이므로 npm

npm install gm

로 설치할 수 있습니다. 공식 문서: http://aheckmann.github.io/ gm/

원형 클리핑의 원리

gm은 GraphicsMagic을 캡슐화한 것이므로 이론적으로는 GraphicsMagic의 일부 기능을 gm을 통해 인터페이스 형태로 구현할 수 있습니다. GM 자체는 원형 클리핑을 지원하지 않습니다(적어도 구현 방법은 모르겠습니다). 이는 기본 레이어가 이를 직접 지원하지 않는다는 의미이기도 합니다.

gm에서 더 일반적으로 사용되는 기능은 크기 조정, 정사각형 자르기 및 형식 변환입니다.

그래서 이 튜토리얼의 원형 자르기의 핵심은 SVG를 사용하여 svg를 통해 원형 이미지를 구성한 다음 이를 gm을 통해 png로 변환하는 것, 즉 svg를 사용하여 이미지 형식을 변환하는 것입니다.

SVG는 원형 이미지 자르기를 달성할 수 있습니다. 인터넷에서 원형 자르기를 달성하는 두 가지 방법을 찾았습니다. 1.clip-path

를 통해 원형 경로를 정의한 다음 이미지 경로의 스타일을 클립인으로 설정합니다. 즉, 이미지 크롭은 이론상으로는 "크롭"입니다

<svg>
  <defs>
    <clipPathid="clipPath">
      <circlecx="5"cy="5"r="5"/>
    </clipPath>
  </defs>
  <imagestyle="clip-path: url(#clipPath);"href="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/> 
</svg>

그런 구성에는 문제가 없습니다. 브라우저에서 gm을 통해 png로 변환한 후 스타일이 효과가 없으며 여전히 정사각형이라는 것을 발견했습니다.

2. 원 태그를 통해

<svg>
  <defs>
    <patternpatternUnits="userSpaceOnUse"id="raduisImage"x="0"y="0"width="10"height="10">
      <imagehref="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/>
    </pattern>
  </defs>
  <circlecx="5"cy="5"r="5"fill="url(#raduisImage)"></circle>
</svg>

위에서 언급한 크롭의 원리를 이해한다면 합성은 간단해집니다. 함께 결합하려는 사진을 svg 형식으로 넣으세요. gm 자체는 작성 또는 모자이크를 사용하여 이미지 합성을 지원하지만(자세한 내용은 이 튜토리얼 참조) svg만큼 명확하지 않은 느낌입니다.

저자가 svg를 통해 텍스트를 추가하려고 했으나 한자가 인식되지 않아 gm을 통해서만 추가할 수 있다는 점을 참고하세요. 추가 시 글꼴을 설정해야 합니다. (코드 구현에 대한 다음 장을 참조하세요.) 자세한 내용)

큰 그림에 사용하려면 두 개의 원형 그림을 삽입하려면 두 가지 패턴을 설정해야 합니다. 경험상 다음과 같습니다.

패턴의 x와 y는 0, 0

1. 으로 설정됩니다.

패턴의 너비와 높이는 캔버스와 동일하게 설정됩니다
이미지의 x와 y는 "실제 위치", 즉 원에 해당하는 cx-r 및 cy-r로 설정됩니다. r은 cx와 cy가 원의 중심을 나타내고 x, y는 그래픽의 왼쪽 위 모서리 위치를 나타내기 때문에 잘립니다.
코드 구현

const gm = require('gm')
const fs = require('fs')
let templateSVG = "/path/to/original.svg"
let outputSVG = "/path/to/repalced.svg"
let input = "/path/to/icon.png"
let font = "/path/to/font.ttf"
let fontColor = "white"
let fontSize = 10

fs.readFile(templateSVG,'utf-8',function(err,data){
  if (err) throw err
  var d = data.replace('{{icon_img}}',input)
  fs.writeFile(outputSVG,d,function(err){
    if (err) throw err
    gm(outputSVG)
    .font(font)
    .fill(fontColor)
    .fontSize(fontSize)
    .drawText(textPosition[0], textPosition[1], text)//
    .write(output,function(err){
      if(err) cb(err)
      // next
    })
  })
})

위 내용은 Nodejs에서 GM 원형 자르기 및 그림 합성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!