How to download Google Slides as images?
The following worked for me:
Set up
Under Resources > Developer Console Project > View Developers Console, enable both the Slides API and the Drive API.
Execution
Replace the ID taken from the Slides URL in the start()
function, and run it, e.g.:
https://docs.google.com/presentation/d/<id>/edit
and the function will save the PNGs to your Drive. This could be extended to group them all in a specific folder etc.
function downloadPresentation(id) {
var slideIds = getSlideIds(id);
for (var i = 0, slideId; slideId = slideIds[i]; i++) {
downloadSlide('Slide ' + (i + 1), id, slideId);
}
}
function downloadSlide(name, presentationId, slideId) {
var url = 'https://docs.google.com/presentation/d/' + presentationId +
'/export/png?id=' + presentationId + '&pageid=' + slideId;
var options = {
headers: {
Authorization: 'Bearer ' + ScriptApp.getOAuthToken()
}
};
var response = UrlFetchApp.fetch(url, options);
var image = response.getAs(MimeType.PNG);
image.setName(name);
DriveApp.createFile(image);
}
function getSlideIds(presentationId) {
var url = 'https://slides.googleapis.com/v1/presentations/' + presentationId;
var options = {
headers: {
Authorization: 'Bearer ' + ScriptApp.getOAuthToken()
}
};
var response = UrlFetchApp.fetch(url, options);
var slideData = JSON.parse(response);
return slideData.slides.map(function(slide) {
return slide.objectId;
});
}
function start() {
downloadPresentation('Slides document id')
}
The best way to get slide images is to use the presentations.pages.getThumbnail
endpoint:
https://developers.google.com/slides/reference/rest/v1/presentations.pages/getThumbnail
The following Apps Script code uses SlidesApp
to iterate over the slides, the Slides Advanced Service to generate the thumbnail image, UrlFetchApp
to fetch the generated thumbnail, and DriveApp
to save it to Drive:
function exportSlideImages(presentationId) {
var presentation = SlidesApp.openById(presentationId);
presentation.getSlides().forEach(function(slide, i) {
// slide = presentation.getSlides()[];
var thumbnail = Slides.Presentations.Pages.getThumbnail(presentationId, slide.getObjectId(), {
'thumbnailProperties.thumbnailSize': 'LARGE'
});
var response = UrlFetchApp.fetch(thumbnail.contentUrl);
var blob = response.getBlob();
blob.setName('slide' + (i + 1) + '.png');
var file = DriveApp.createFile(blob);
Logger.log('Created file "%s" for slide number %s', file.getName(), i + 1);
});
}
I ended up with a slightly lower-tech way. This does have artifacts from compression that comes with the PDF export, but gets close enough to original quality for me.
I added annotations to images in Google Slides, to use the images in marvelapp.com eventually. So I exported Google slides as PDF.
Then issued command line (requires ghostscript to be installed). I actually needed to do 1200 DPI here. This is to get the level of detail I had in the original images, which I had dropped to google slides.
gs -sDEVICE=pngalpha -o file-%03d.png -r1200 demo.pdf
As my slides were made up of pictures I'd just dragged to google slides, I issued the following to crop white areas connected to image borders (requires ImageMagick installed)
mogrify -trim *.png
Finally, I resize the images back to the original size of images. Sharpen level of 0.5 does not seem to cause significant artifacts, 1.0 was too strong.
convert -resize 1794x971 -sharpen 0x0.5 *.png
You could probably combine these into a single operation. For some reason, the actual conversion process in such high DPI was a lot faster for me directly through gs than using ImageMagick.