Nodejs에서 GM 자르기를 사용하여 그림 합성

이 글은 주로 Nodejs에서 GM 원형 자르기와 사진 합성을 사용하는 예를 소개하고 있습니다.

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

GaphicsMagic 설치

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

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

apt-get install graphicsmagic

와 같은 라이브러리, 명령줄에서 GraphicsMagic을 사용하는 방법을 배우려면 여기를 읽어보세요: http://www.jb51.net/LINUXjishu/120332.html

gm Nodejs에 설치

gm은 노드 라이브러리이므로 npm으로 설치할 수 있습니다.

npm install gm

공식 문서: http://aheckmann.github.io/gm/

원형 클리핑의 원리

gm은 GraphicsMagic을 캡슐화한 것이므로 이론상으로 GraphicsMagic의 모든 기능은 gm Achieve를 통해 인터페이스될 수 있습니다. 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>

clip-path를 사용하면 이 튜토리얼을 볼 수 있습니다

하지만 브라우저에서는 이 구성에 문제가 없습니다. 하지만 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
    })
  })
})

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 사용자 정의 전역 메서드를 구현하는 방법

vue 구성 요소에서 전역 등록 및 로컬 등록을 구현하는 방법

vue-cli+webpack 프로젝트를 통해 프로젝트 이름을 수정하는 방법

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