Has Anyone Used Sharp Library to Cut Screenshots Taken with Puppeteer into Chunks?

1

This topic was automatically generated from Slack. You can find the original thread here.

Anybody used sharp library yet? I want to cut screenshots I have taken using puppeteer in chunks.

2

I haven’t used it myself, but are you seeing any issues running the code you need on Pipedream or just looking for general advice?

3

Code didn’t run. But it was not clear, if the problem is my code

4 
import { puppeteer } from '@pipedream/browsers';
import fs from 'fs';
import util from 'util';
import sharp from 'sharp';

const writeFile = util.promisify(fs.writeFile);

async function autoScroll(page) {
  await page.evaluate(async () => {
    await new Promise((resolve) => {
      let totalHeight = 0;
      const distance = 100;
      const timer = setInterval(() => {
        const scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;

        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
}

export default defineComponent({
  async run({ steps, $ }) {
    const browser = await puppeteer.browser();
    const page = await browser.newPage();
    const url = steps.trigger.event.record.url_sites[19]

    await page.goto(url);

    // Perform auto-scroll
    await autoScroll(page);

    // Take a full-page screenshot and save it to a file
    const screenshotBuffer = await page.screenshot({ fullPage: true });
    const screenshotPath = '/tmp/screenshot.png';
    await writeFile(screenshotPath, screenshotBuffer);

    // Split the screenshot into multiple smaller images
    const image = sharp(screenshotPath);
    const { width, height } = await image.metadata();
    const tileHeight = 1000; // Height of each smaller image
    const numTiles = Math.ceil(height / tileHeight);

    const outputPaths = [];
    for (let i = 0; i < numTiles; i++) {
      const outputPath = `/tmp/screenshot-${i}.png`;
      await image
        .extract({ left: 0, top: i * tileHeight, width, height: tileHeight })
        .toFile(outputPath);
      outputPaths.push(outputPath);
    }

    // Close the browser
    await browser.close();

    return { outputPaths };
  },
});
5

Are you seeing a specific error?

6

Pipedream Internal Error
Please retry your event or reach out to Pipedream support at https://pipedream.com/support/

7

could you do me a favor and send me a DM with the URL of your workflow? That’ll have your workflow ID, and I can take a look at the logs on my side

8

could you do me a favor and try changing the sharp import to:

import sharp from 'sharp@0.33.0-alpha.9'
9

then try running again

10

I looked at the logs for your workflow and we’re failing to install the sharp pre-built binary. The installation runs some scripts (outside of the standard package manager install). sharp is improving the installation flow and I got that version from a recent alpha release that tests that (see the comments in the thread).

If that doesn’t work, let me know and I can check out the logs again to see if there’s another specific issue I can share with the sharp team

11

Thanks Dylan, This looks already better. Still getting an error, but it seems like a code issue on my end. Will need to look into it tomorrow.

12

Working :+1:

13

did you ever figure this out?