0

I am trying to get the screenshot from this link to Google Drive using Google Apps Script. For that, I found this source to make it work. I tried to modify the script but the result is not exactly what I am looking to achieve. Here is the script:

    function getScreenShot(){

       const apiKey = "###"; 
       const url1 = "http://www.amafruits.com"; 
       const apiEndpoint = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key=${apiKey}&url=${encodeURIComponent(url1)}&category=performance&strategy=mobile`;
    
          const res = UrlFetchApp.fetch(apiEndpoint)
          const obj = JSON.parse(res.getContentText());
          const base64 = obj["lighthouseResult"]["audits"]["final-screenshot"][
            "details"
          ]["data"]
            .split(",")
            .pop();
          const blob = Utilities.newBlob(
            Utilities.base64Decode(base64),
            "image/jpeg",
            "sample1.jpg"
          );
          const id = DriveApp.createFile(blob).getId();
          console.log(id);
        }

However, it gives the following output:

Output Image

Ideally, I want to get the following screenshot from the website:

Image Result

How do I get the full page screenshot instead of just one small portion? Any guidance would be much appreciated. Thank you for your time.

1 Answers1

1

In your situation, how about the following sample script?

Sample script:

In this sample script, I retrieved the screenshot from https://pagespeed.web.dev/report?url=http%3A%2F%2Fwww.amafruits.com%2F using Charts Service.

function myFunction() {
  const url = "https://pagespeed.web.dev/report?url=http%3A%2F%2Fwww.amafruits.com%2F"; // This URL is from your question.

  const blob = Charts
    .newTableChart()
    .setDataTable(Charts.newDataTable().addColumn(Charts.ColumnType.STRING, "").addRow([`<meta http-equiv="refresh" content="0; URL='${url}'">`]).build())
    .setOption('allowHtml', true)
    .setDimensions(1000, 2000)
    .build()
    .getBlob();
  DriveApp.createFile(blob.setName("sample.png"));
}
  • When this script is run, the whole page is retrieved as a PNG file. That image includes your expected situation. Unfortunately, if you want to retrieve only your showing image, it is required to edit the exported image.

Note:

  • In this case, when the image size is smaller than the HTML page, please adjust .setDimensions(1000, 2000), and test it again.
  • In this sample, it seems that all URLs cannot be used. Please be careful about this.

Reference:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • Amazing, it worked as intended. Thank you so much. –  Feb 16 '23 at 01:40
  • `it seems that all URLs cannot be used`, can I ask why? Thank you –  Feb 16 '23 at 01:47
  • @Roomi Thank you for replying. About `it seems that all URLs cannot be used, can I ask why?`, when I tested this before, an error occurs. But, I have no clear reason for the error. It might be due to Javascript and/or the response content type like `text/event-stream` and `application/octet-stream`. Sorry. I have no clear answer about this. – Tanaike Feb 16 '23 at 02:42
  • I ran this script many times since yesterday, and this issue is affecting the overall working of the script, is there any other solution you suggest, or should I post this as a new question? can this link help: https://support.google.com/docs/thread/79843345/google-script-fail-we-re-sorry-a-server-error-occurred?hl=en thank you. –  Feb 17 '23 at 12:26
  • @Roomi About your new issue of `I ran this script many times since yesterday, and this issue is affecting the overall working of the script, is there any other solution you suggest, or should I post this as a new question? thank you.`, I would like to support you. So, in this case, please post it as a new question by suggesting it in your comment. By this, it will help users including me to think of a solution. When you can cooperate to resolve your new issue, I'm glad. Can you cooperate to do it? – Tanaike Feb 17 '23 at 12:28