브라우저의 스쿠쇼를 연결해 GIF 화상을 만들자【Puppeteer를 사용해 폭속】

안녕하세요. 게임을 만들어 배우는 프로그래밍 학습 서비스 프로아카를 개발하고 있는 노다 켄입니다.
사용자가 입력한 하이쿠에서 GIF 이미지를 생성하고 있습니다.
이는 서버에서 브라우저(Chrome)를 시작하고 스크린샷을 연결하여 생성됩니다.
################################################### # ################################################### # ↑이런 느낌의 GIF를 만들 수 있습니다. 꼭 실제로 해보세요.

어떻게 GIF 이미지를 만드는지, 코드로 해설

이번에 사용하는 언어는 Nodejs입니다.
먼저 적절한 빈 디렉토리로 이동하여 다음 명령을 실행하십시오.

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

사용하는 3개의 라이브러리를 간단히 설명합니다.
우선 Puppeteer는 GUI를 조작하지 않고 프로그램에서 API로 브라우저(Chrome)를 제어할 수 있는 Node.js로 만들어진 라이브러리입니다. 이번에는 Puppeteer의 스크린 샷 기능을 이용합니다.
png-js는 Puppteer로 찍은 스쿠쇼의 PNG 데이터를 Node로 처리하는 라이브러리이고, gifencoder는 png에서 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

동작이 종료하면(자), test.gif 라고 하는 파일이 되어 있을 것입니다.
그것을 열면 다음과 같은 이미지가 만들어집니다!

자세한 설명

방금 전의 코드를 읽어내기 위한 해설을 합니다.
전체 흐름은
Puppeteer로 HTML을 렌더링합니다.
이하 루프
→ 스쿠쇼를 찍다
→gifencoder에 스쿠쇼의 데이터를 읽게 한다
⇨ Puppeteer에게 브라우저에서 JS를 실행하도록 지시합니다.
입니다. 마지막 JS를 실행하는 것은,

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

의 부분입니다. 브라우저가 표시하는 HTML을 바꾸는 것 같은 JS를 실행하는 것으로, 애니메이션을 만들 수가 있습니다.
그리고는 코드를 읽을 수 있으면 이해할 수 있다고 생각합니다.

요약

「 575 메이커 」를 만드는 데 있어서, 어떻게 하면 좋은지 시행착오했는데, 이 형태가 되었습니다.
GIF 생성을 할 수 있게 되면, 재미있는 서비스를 많이 할 수 있을 것 같아서 두근 두근하네요.
끝까지 읽어 주셔서 감사합니다. 좋아요, 주식, 댓글을 기다리고 있습니다.
그럼, 마지막으로 한구.

끝에

내가 개발하고 있는 게임을 만들어 배우는 프로그래밍 학습 서비스 프로아카에서는 무료 체험도 실시하고 있습니다. 꼭 봐 주세요.