이미지에 레이블 추가 NodeJS ImageMagick

Question

사과를 부탁했지만 답변을 찾는데 어려움이 있습니다.

ImageMagick과 함께 Node GM 패키지를 사용하고 있습니다. 내가 인상을 받고 있기 때문에 label이 거기에서 작용한다.

이미지를 찍고 그 위에 label을 추가하고 싶습니다.

원래는 drawText()을 사용하고 있었지만 메신저에서는 label의 자동 크기 조정을 활용해야합니다. 내가 가지고있는 것 :

im(path.join(__dirname, '../public/images/imgen/backgrounds/', color + '_' + type + '.png')) 
    .gravity('West') 
    .fill('#FFFFFF') 
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf')) 
    .out('label: ' + text) 
    .write(
     path.join(__dirname, '../public/images/imgen/generated/', fileName), function(err) { 
     if (!err) { 
      // If the write was successful then redirect to the new image 
      res.redirect('/images/imgen/generated/' + fileName); 
     } else { 
      console.error(err); 
      res.status(500).end(); 
     } 
    }); 

위의 그림은 하나가 아닌 두 개의 이미지를 생성합니다. 나는 빈 이미지를 만들고 이미지를 배경으로 삽입해야한다고 생각합니다. 그러나 나는 이것을하는 법을 배울 수 없다.

im(1080, 1080) 
    .gravity('West') 
    .fill('#FFFFFF') 
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf')) 
    // Add the image as a background here 
    .out('label: ' + text) 
    .write(
     path.join(__dirname, '../public/generated/', fileName), function(err) { 
     if (!err) { 
      // If the write was successful then redirect to the new image 
      res.redirect('/images/imgen/generated/' + fileName); 
     } else { 
      console.error(err); 
      res.status(500).end(); 
     } 
    }); 

여기서 이미지를 배경으로 추가한다고 말하면 이미지를 추가하려면 어떻게 해야할지 모르겠다. 이미지를 삽입하려면 gm docs 어디에서나 찾을 수 없습니다.

나는 .out('texture: ...')과 .out('background: ...')을 사용해 보았습니다. IM convert: no decode delegate for this image format TEXTURE '오류/구성 파일/ReadImage/501'에서 다음과 같은 오류가 발생합니다.

아마도 out() 메서드를 제대로 이해하지 못했을 것입니다. 그러나 Github 문제와 검색 결과를 통해 답을 얻지 못했습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

나는 node.js에있는 모든 괄호와 함께 실제 정신 블록을 가지고 있지만 어떤 도움이 환영한다고 말했습니까? 그렇다면 여러분은 서로를 향해 조금씩 작업하여 정렬 할 수 있습니다. ImageMagick으로 명령 줄에서 시작하여 무대 뒤에서 일어나는 일을 이해하고 node.js으로 번역 할 수 있습니다.

가장 먼저 ImageMagick 연산자 앞에 대시가없고 콜론을 사용하면 자체 캔버스가 생성됩니다. 즉, 글이나 그림을 그리기 위해 기존의 것을 필요로하지 않습니다. 예 canvas:, xc:, gradient:, label: 같습니다

convert -size 100x80 canvas:red a.jpg    # "canvas: is same as "xc:" 

convert -size 100x80 gradient:cyan-magenta a.jpg # "gradient:" has a colon 

convert -size 400x60 -undercolor yellow label:"This will be autosized to fit" -trim c.jpg 

convert -size 400x60 -undercolor yellow label:"... so will this" -trim c.jpg 

,

바라 건 말하면 ImageMagick이 짧은 메시지의 큰 글꼴을 선택했기를 바랍니다.

모두 괜찮지 만 -annotate (대시가 앞에오고 그 뒤에 콜론이 없음)을 사용하려면 먼저 캔버스를 만든 다음 나중에 이와 같이 주석을 달아야합니다. :

convert -size 400x120 xc:blue -fill yellow -annotate +40+80 "Annotation" c.jpg 

내가에 무엇입니까 것은, 당신은 효과적으로 두 개의 캔버스를 가지고 두 개의 출력 이미지를 얻을 것이다 당신은 캔버스 및 레이블 작성하는 경우 (자신의 캔버스를 만들고, 기억)이다 . 따라서이를 해결하는 방법에는 두 가지 옵션이 있습니다. 당신이 중 하나를

• 사용 캔버스과 주석, 또는

• 당신이 레이블과 배경 이미지를 만들고 캔버스 위에 라벨 다음 복합.

방금 ​​첫 번째 옵션을 보여 줬습니다. 이제 두 번째 옵션을 살펴 보겠습니다. 올바른 크기의 라벨을 생성 한 다음 원하는 위치 배경 위에 올려 놓으 당신은 배경 위에 그 다음 복합 원하는대로 할 수

convert -size 150x40 -undercolor yellow label:"Some funky text" -trim \ 
    -size 300x200 -gravity center xc:red +swap -composite result.jpg 

그럼, 그 않는 것은을 만드는 것입니다 레이블이 150x40이고 텍스트를 그 위에 놓습니다. 두 번째 줄은 300x200의 빨간색 캔버스를 만들고 (+swap을 사용하여) 텍스트 레이블 뒤에 배치하고 중간에 합성합니다. 캔바스에 레이블을 합성했기 때문에 두 개의 독립적 인 이미지가 아닌 하나의 합성 이미지가되었습니다.

우리가 백악관의 이미지를 가지고 있고 레이블을 만들고 그것을 덮어 쓰려는 또 다른 예가 여기에 있습니다. 먼저 레이블, 모든 정확한 크기와 색상을 만들고, 우리는 상단에 라벨을 합성하기 전에 백악관 이미지를로드하고 다시 그것을 교환 :

magick -size 300x200 -background none -fill magenta label:"Some funky label" -trim whitehouse.jpg +swap -gravity southeast -composite result.png 

희망 어떻게 볼 수 있습니다 그 주위에있는 모든 사랑 괄호를 넣으려면 node.js ....