Add option to set window size in render command

Author: yuanchuan

bin/index.js

@@ -47,6 +47,7 @@ program
     .option('-s, --selector <selector>', 'CSS selector to target the rendered node, defaults to `css-doodle`')
     .option('-d, --delay <delay>', 'Delay after the image is rendered, e.g, `2s`')
     .option('-t, --time <time>', 'Record screen for a specific time, e.g, `10s')
+    .option('-ws, --window-size <size>', 'The size of the rendered window, e.g, `800x600`, defaults to `1600x900`')
     .action(handleRender);
 
 program

lib/handler.js

@@ -20,6 +20,14 @@ export async function handleRender(source, options) {
     options.scale = Number(options.scale) || (options.time ? 1 : 2);
     options.selector ??= 'css-doodle';
 
+    options.windowWidth = 1600;
+    options.windowHeight = 900;
+    if (options.windowSize) {
+        const [w, h = w] = options.windowSize.split(/[,x]/);
+        options.windowWidth = Number(w);
+        options.windowHeight = Number(h);
+    }
+
     let title = options.time ? 'record' : 'image';
     if (source) {
         const basename = path.basename(source);

lib/render/screencast.js

@@ -1,14 +1,11 @@
 import { setTimeout } from 'node:timers/promises';
 
-const defaultWidth = 1600;
-const defaultHeight = 900;
-
 export async function screencast(page, options) {
-    const { scale, output, selector } = options;
+    const { scale, output, selector, windowWidth, windowHeight } = options;
 
     await page.setViewport({
-        width: defaultWidth,
-        height: defaultHeight,
+        width: windowWidth,
+        height: windowHeight,
     });
 
     const clip = await page.evaluate(selector => {
@@ -31,8 +28,8 @@ export async function screencast(page, options) {
     }, selector);
 
     await page.setViewport({
-        width: Math.ceil(clip.width) || defaultWidth,
-        height: Math.ceil(clip.height) || defaultHeight,
+        width: Math.ceil(clip.width) || windowWidth,
+        height: Math.ceil(clip.height) || windowHeight,
     });
 
     const recorder = await page.screencast({

lib/render/screenshot.js

@@ -1,12 +1,9 @@
-const defaultWidth = 1600;
-const defaultHeight = 900;
-
 export async function screenshot(page, options = {}) {
-    const { scale, output, selector } = options;
+    const { scale, output, selector, windowWidth, windowHeight } = options;
 
     await page.setViewport({
-        width: defaultWidth,
-        height: defaultHeight,
+        width: windowWidth,
+        height: windowHeight,
         deviceScaleFactor: scale
     });
 
@@ -30,8 +27,8 @@ export async function screenshot(page, options = {}) {
     }, selector);
 
     await page.setViewport({
-        width: Math.ceil(info.width) || defaultWidth,
-        height: Math.ceil(info.height) || defaultHeight,
+        width: Math.ceil(info.width) || windowWidth,
+        height: Math.ceil(info.height) || windowHeight,
         deviceScaleFactor: scale
     });