How to Convert Google Slides to PNG Images with Google Script

July 16, 2024

How to Convert Google Slides to PNG Images with Google Script

Document Studio can convert Google Slides into high-resolution PNG images. This can be useful if you want to create multiple variations of the same slide in bulk - create a single template in Google Slides and then use Document Studio to generate PNG images with different text or images, pulled from a Google Sheet or Google Forms.

Internally, the app uses the Google APIs to generate high-resolution thumbnail images of the slides and uploads the individual slides to the Google Drive of the current user.

In this tutorial, we’ll explore two methods to achieve the slide-to-png conversion using Google Apps Script.

Approach #1 - Use the Google Slides API

You can use the Google Slides API to get the thumbnail images of the slides, fetch the blob of the image, and then upload the image to Google Drive.

const generateSlideScreenshot = () => {
  const presentation = SlidesApp.getActivePresentation();
  const presentationId = presentation.getId();
  // Get the object ID of the first slide in the presentation
  const pageObjectId = presentation.getSlides()[0].getObjectId();
  const apiUrl = `https://slides.googleapis.com/v1/presentations/${presentationId}/pages/${pageObjectId}/thumbnail`;
  const apiUrlWithToken = `${apiUrl}?access_token=${ScriptApp.getOAuthToken()}`;

  // The thumbnail image URL is in the response
  const request = UrlFetchApp.fetch(apiUrlWithToken);
  const { contentUrl } = JSON.parse(request.getContentText());

  // The thumbnail image width of 1600px.
  const blob = UrlFetchApp.fetch(contentUrl).getBlob();
  DriveApp.createFile(blob).setName('image.png');
};

Limitations

There are a few limitations with the previous approach.

First, you would need to enable Google Slides API in the console of your Google Cloud project associated with the Google Apps Script project. Second, the thumbnail images has a fixed width of 1600px/800px/200px and you cannot change the size of the image.

Also, you need to make two API calls here. The first one is to get the thumbnail link of the presentation. The additional API call will fetch the thumbnail image from the URL.

Approach #2 - Use the Google Drive API

The recommended approach is to use the Google Drive API to export the slides as PNG images. The big advantage here is that the generated image is of the same resolution as the original slide. So if you have set your presentation page size as 600x800 pixels, the generated PNG image will also be of the same size.

And there’s one less API call to make since the Drive API can directly export the slide as an image.

const generateSlideScreenshotWithDrive = () => {
  const presentation = SlidesApp.getActivePresentation();
  const id = presentation.getId();
  const pageid = presentation.getSlides()[0].getObjectId();

  const apiUrl = `https://docs.google.com/presentation/d/${id}/export/png?id=${id}&pageid=${pageid}`;
  const parameters = {
    method: 'GET',
    headers: { Authorization: `Bearer ${ScriptApp.getOAuthToken()}` },
    contentType: 'application/json',
  };

  const request = UrlFetchApp.fetch(apiUrl, parameters);
  const blob = request.getBlob();
  DriveApp.createFile(blob).setName('image.png');
};