브라우저의 캡처샷을 연결해서 GIF 이미지를 만들자. [Puppeeteer로 가속!]

안녕하세요.저는 제작게임학습프로그래밍서비스전문대학을 개발한 로전겸입니다.
사용자가 입력한 하이쿠에서 GIF 이미지를 생성합니다.
이것은 서버로 브라우저 (Chrome) 를 시작해서 그 캡처를 연결해서 만든 것이다.
################################################### ################################################### ↑ 이런 느낌을 줄 수 있는 GIF.꼭 실제로 해보세요.

GIF 이미지를 어떻게 만드는지 코드가 첨부된 해설

이번에 사용한 언어는 Nodejs입니다.
우선 적당한 빈 디렉터리로 이동해서 다음 명령을 실행하십시오.

$ npm init -f
$ npm install puppeteer  png-js gifencoder

사용할 라이브러리 3개를 간단히 설명합니다.
먼저 Pupeteer는 GUI를 사용하지 않고 API를 통해 브라우저를 제어할 수 있습니다.js로 만든 라이브러리입니다.이번에는 Puppeeter의 캡처 기능을 활용했다.
pg-js는 Pupper가 촬영한 Squist PNG 데이터를 노드로 처리하는 프로그램 라이브러리로, gifencoder는 pg에서 GIF를 만드는 프로그램 라이브러리다.
다음은 index.js를 제작하려면 다음과 같이 하십시오.한 번 복사해서 동작을 확인하는 것이 좋습니다.
index.js

const fs = require('fs');
const puppeteer = require('puppeteer');

const GIFEncoder = require('gifencoder');
const PNG = require('png-js');
function decode(png) {
  return new Promise(r => {
    png.decode(pixels => r(pixels))
  });
}

async function gifAddFrame(page, encoder) {
  const pngBuffer = await page.screenshot({clip: {width: 1024, height: 200, x: 0, y: 0}});
  const png = new PNG(pngBuffer);
  await decode(png).then(pixels => encoder.addFrame(pixels));
}

(async () => {
  const browser = await puppeteer.launch({
    headless: false, slowMo: 0,
  });
  const page = await browser.newPage();
  page.setViewport({width: 1024, height: 200});
  const text = '私は猫になりたい';
  const html = `<div id="main" style="font-size: 100px;">${text[0]}</div>`;
  await page.setContent(html, {
    waitUntil: ['networkidle0']
  });

  // record gif
  var encoder = new GIFEncoder(1024, 200);
  encoder.createWriteStream()
    .pipe(fs.createWriteStream('test.gif'));

  // setting gif encoder
  encoder.start();
  encoder.setRepeat(0);
  encoder.setDelay(150);
  encoder.setQuality(10); // default

  for (let i = 0; i < 10; i++) {
    await gifAddFrame(page, encoder);
    await page.evaluate(`document.getElementById("main").innerHTML = '${text.slice(0, i + 1)}'`)
  }

  // finish encoder, test.gif saved
  encoder.finish();

  await browser.close();
})();

그리고 실행한다.

$ node index.js

동작이 끝나면이런 서류는 다 만들었을 거야.
그걸 열면 다음 그림을 만들 수 있어요!

상세히 설명하다

방금 코드를 해독하기 위해 해설을 진행하다.
전체 프로세스
Pupeteer를 사용하여 HTML을 렌더링합니다. (이때는 "고양이가 되고 싶다"는 "나"만 렌더링합니다.
다음 순환
→사진 찍기
→gifencoder로 하여금 Square의 데이터를 읽게 하다
오류 프롬프트에서 브라우저에서 JS를 실행합니다.
네.마지막 JS를 수행하는 것은

await page.evaluate(`document.getElementById("main").innerHTML = '${text.slice(0, i + 1)}'`)

섹션브라우저의 HTML 표시를 변경하는 JS를 실행하여 애니메이션을 만들 수 있습니다.
그리고 코드를 읽으면 이해할 수 있을 것 같아요.

총결산

「 메이커 」만들면서 어떻게 하면 좋을지 반복해서 시험하다가 이 모양이 됐어요.
GIF를 만들 수 있다면 재미있는 서비스를 많이 제공할 수 있을 것 같아서 흥분할 거예요.
끝까지 읽어주셔서 감사합니다.그래, 주식, 네 평론을 기다릴게.
그럼, 마지막 한마디.

끝맺다

제가 개발한 게임을 제작하고 배우는 프로그래밍 학습 서비스 전공 학원에서도 무료 체험을 합니다.꼭 보세요.