노드는 텍스트를 조작하여 이미지를 생성합니다.

이번에는 노드 운영 텍스트 생성 사진을 가져오겠습니다. 노드 운영 텍스트 생성 주의 사항은 무엇입니까?

솔루션 아이디어

텍스트를 svg로 변환 -> svg를 png로 변환 -> 사진 병합

관련 휠

1. Images Node.js 추가 설치종속성

2. text-to-svg text-to-svg

3. svg2png svg-to-png image
   이 필요 없는 경량 크로스 플랫폼 이미지 인코딩 및 디코딩 라이브러리

샘플 코드

'use strict';
const fs = require('fs');
const images = require('images');
const TextToSVG = require('text-to-svg');
const svg2png = require("svg2png");
const Promise = require('bluebird');
Promise.promisifyAll(fs);
const textToSVG = TextToSVG.loadSync('fonts/文泉驿微米黑.ttf');
const sourceImg = images('./i/webwxgetmsgimg.jpg');
const sWidth = sourceImg.width();
const sHeight = sourceImg.height();
const svg1 = textToSVG.getSVG('魏长青-人人讲App', {
 x: 0,
 y: 0,
 fontSize: 24,
 anchor: 'top',
});
const svg2 = textToSVG.getSVG('邀请您参加', {
 x: 0,
 y: 0,
 fontSize: 16,
 anchor: 'top',
});
const svg3 = textToSVG.getSVG('人人讲课程', {
 x: 0,
 y: 0,
 fontSize: 32,
 anchor: 'top',
});
Promise.coroutine(function* generateInvitationCard() {
 const targetImg1Path = './i/1.png';
 const targetImg2Path = './i/2.png';
 const targetImg3Path = './i/3.png';
 const targetImg4Path = './i/qrcode.jpg';
 const [buffer1, buffer2, buffer3] = yield Promise.all([
  svg2png(svg1),
  svg2png(svg2),
 svg2png(svg3),
 ]);
 yield Promise.all([
  fs.writeFileAsync(targetImg1Path, buffer1),
  fs.writeFileAsync(targetImg2Path, buffer2),
  fs.writeFileAsync(targetImg3Path, buffer3),
 ]);
 const target1Img = images(targetImg1Path);
 const t1Width = target1Img.width();
 const t1Height = target1Img.height();
 const offsetX1 = (sWidth - t1Width) / 2;
 const offsetY1 = 200;
 const target2Img = images(targetImg2Path);
 const t2Width = target2Img.width();
 const t2Height = target2Img.height();
 const offsetX2 = (sWidth - t2Width) / 2;
 const offsetY2 = 240;
 const target3Img = images(targetImg3Path);
 const t3Width = target3Img.width();
 const t3Height = target3Img.height();
 const offsetX3 = (sWidth - t3Width) / 2;
 const offsetY3 = 270;
 const target4Img = images(targetImg4Path);
 const t4Width = target4Img.width();
 const t4Height = target4Img.height();
 const offsetX4 = (sWidth - t4Width) / 2;
 const offsetY4 = 400;
 images(sourceImg)
 .draw(target1Img, offsetX1, offsetY1)
 .draw(target2Img, offsetX2, offsetY2)
 .draw(target3Img, offsetX3, offsetY3)
 .draw(target4Img, offsetX4, offsetY4)
 .save('./i/card.png', { quality : 90 });
})().catch(e => console.error(e));

주의사항

text-to-svg는 중국어 글꼴의 지원이 필요합니다. 그렇지 않으면 중국어가 깨질 수 있습니다. 깨진 컴퓨터에서 한 번 실행하는 데 500밀리초 이상이 걸렸습니다. 모든 사람에게 공유하면 충분할 것 같습니다. 참조.                                         ​​​​​​​​

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS의 정규 표현식 애플리케이션

JS의 유형 및 유형 판단(코드 포함)

JS는 브라우저에서 스크립트를 어떻게 감지합니까?

위 내용은 노드는 텍스트를 조작하여 이미지를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!