🎥 Smart Frames Capture

This commit is contained in:
ful1e5 2020-08-29 10:30:13 +05:30
parent 7abad3d8d1
commit 7b7d5f7ae0

View file

@ -3,7 +3,6 @@ import path from "path";
import puppeteer from "puppeteer"; import puppeteer from "puppeteer";
import { generateRenderTemplate } from "./utils/htmlTemplate"; import { generateRenderTemplate } from "./utils/htmlTemplate";
import { getFrameNumber } from "./utils/getFrameNumber";
import { import {
staticCursors, staticCursors,
bitmapsDir, bitmapsDir,
@ -11,6 +10,7 @@ import {
animatedCursors, animatedCursors,
animatedClip, animatedClip,
} from "./config"; } from "./config";
import { matchImages } from "./utils/matchImages";
const main = async () => { const main = async () => {
const browser = await puppeteer.launch({ const browser = await puppeteer.launch({
@ -28,7 +28,7 @@ const main = async () => {
try { try {
console.log("📸 Rendering Static Cursors..."); console.log("📸 Rendering Static Cursors...");
// Rendering satic .svg files
for (let svg of staticCursors) { for (let svg of staticCursors) {
const buffer = fs.readFileSync(path.resolve(svgsDir, svg), "utf8"); const buffer = fs.readFileSync(path.resolve(svgsDir, svg), "utf8");
if (!buffer) throw new Error(`${svg} File Read error`); if (!buffer) throw new Error(`${svg} File Read error`);
@ -58,8 +58,7 @@ const main = async () => {
console.log("🎥 Rendering Animated Cursors..."); console.log("🎥 Rendering Animated Cursors...");
// Rendering animated .svg files for (let [svg] of Object.entries(animatedCursors)) {
for (let [svg, { frames }] of Object.entries(animatedCursors)) {
const buffer = fs.readFileSync(path.resolve(svgsDir, svg), "utf8"); const buffer = fs.readFileSync(path.resolve(svgsDir, svg), "utf8");
if (!buffer) throw new Error(`${svg} File Read error`); if (!buffer) throw new Error(`${svg} File Read error`);
@ -75,24 +74,34 @@ const main = async () => {
if (!svgElement) throw new Error("svg element not found"); if (!svgElement) throw new Error("svg element not found");
// Render Frames // Render Config
for (let index = 1; index <= frames; index++) { let index = 1;
// config let breakLoop = false;
const frame = getFrameNumber(index, frames.toString().length); const frames: Buffer[] = [];
const bitmap =
frames == 1
? `${path.basename(svg, ".svg")}.png`
: `${path.basename(svg, ".svg")}-${frame}.png`;
const out = path.resolve(bitmapsDir, bitmap); // 1st Frame
frames.push(
// Render
await svgElement.screenshot({ await svgElement.screenshot({
omitBackground: true, omitBackground: true,
path: out,
clip: animatedClip, clip: animatedClip,
encoding: "binary",
})
);
// Pushing frames until it match to 1st frame
index++;
while (!breakLoop) {
const newFrame = await svgElement.screenshot({
omitBackground: true,
clip: animatedClip,
encoding: "binary",
}); });
// console.log(`${svg} frame ${frame}/${frames} rendered at ${out}`); const diff = matchImages(frames[0], newFrame);
console.log(diff, "frames", 1, "--", index);
if (diff < 3000) {
breakLoop = true;
}
index++;
} }
await page.close(); await page.close();