I am a big fan of using Google Slides as a cloud-hosted lightweight illustrator replacement (that also happens to be collaborative and free!). I wrote up a few thoughts on my process here:
What I'm trying to do in my workflow is download all of the slides in a presentation as images at once? The Google Slides UI only lets you download each slide as a PNG one at a time?
Is this possible using add-ons or Apps Scripts somehow? Not sure where to start... Thanks!
The following worked for me:
Under Resources > Developer Console Project > View Developers Console, enable both the Slides API and the Drive API.
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.
For anyone else out there looking for an answer, I just found the official export URL from my JavaScript console, when clicking the "Download -> JPG" from under the file menu, the URL I saw in the console which downloads the picture is (For example): https://docs.google.com/presentation/d/1xRtKNtBaaiGzZx3sUz2k3OUdW0hbPmm8HsRVz222SnA/export/jpeg?id=1xRtKNtBaaiGzZx3sUz2k3OUdW0hbPmm8HsRVz222SnA&pageid=g6eb73d655b_0_0
Which is really:
"TheSlideID" can be found by doing the following: Go to your Google Slide show file, go to a different slide than the first one, then copy the URL, it should be like:
for example. Notice, after the "edit" keyword, is "#slide=id.g6eb73d655b_0_0", to extract the SlideId (to plug in to the other URL) is very simple: just replace the text "#slide=id." with "" (if you're doing it programmatically, or just manually), then plug in the remainder (in this case "g6eb73d655b_0_0") to "TheSlideID" in the above URL, and vwala!
This bookmark snippet from https://aijayvishnu.medium.com/how-to-download-google-slide-presentations-published-to-the-web-3c1564bd92c1 will put all slides on one page. It's really easy to use, create a bookmark and click it. (More info in the article)
javascript:
var atag = "punch-viewer-content",
btag = "-caption",
ctag = "aria-setsize",
dtag = "aria-posinset",
msvg = document.getElementsByTagName("svg"),
node = document.querySelectorAll('[class$="' + btag + '"]')[0],
view = document.getElementsByClassName(atag)[0],
size = node.getAttribute(ctag),
data = "",
func = () => {
data += msvg[0].outerHTML;
if((i = node.getAttribute(dtag))==size) document.write(data);
else view.click(), setTimeout(func,10)
};func()
I have searched few places, found some answers for downloading google slides as image but they seem complicated or takes more time than I expect.
I want to get all the slides of a google slide presentation as png or jpg file and then save them in a google drive. Actually I want them in my local computer. But I though If I can do this, then later I will download and use.
So how to do it quickly and easily? I found this link. But no easy answer here.
Advantage of using this script to convert google slides into images : If you like to download them into your PC, you can download the folder. If you like to share a single image to others you can do that as well. Most importantly, if you want to share presentation as image file- just share the folder.
Here is my Google Slide. You can copy it. Open the apps script from Tool>Script Editor. Then run "generateScreenshots" function. This function is not a work of myself, but got it from here. Only modified to save images into a specific folder name "Test_Image". You can create your own folder in google drive and then use folder ID in the apps script and update this line:
var folder = DriveApp.getFolderById("Folder ID");//Replace Folder ID with your own folder
Complete code is here.
function generateScreenshots() {
// open Google Slide and then copy Google Slide ID (presentation ID)
var presentationId ="1ZXT1YemGiNcFxiN61hwew_SEsEDC4cl_V-j0V_hkj6w";
var presentation = SlidesApp.openById(presentationId);
var baseUrl =
"https://slides.googleapis.com/v1/presentations/{presentationId}/pages/{pageObjectId}/thumbnail";
var parameters = {
method: "GET",
headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
contentType: "application/json",
muteHttpExceptions: true
};
// Log URL of the main thumbnail of the deck
Logger.log(Drive.Files.get(presentationId).thumbnailLink);
// For storing the screenshot image URLs
var screenshots = [];
var slides = presentation.getSlides().forEach(function(slide, index) {
var url = baseUrl
.replace("{presentationId}", presentationId)
.replace("{pageObjectId}", slide.getObjectId());
var response = JSON.parse(UrlFetchApp.fetch(url, parameters));
// Upload Googel Slide image to a Google Drive Folder
var blob = UrlFetchApp.fetch(response.contentUrl).getBlob();
var folder = DriveApp.getFolderById("Your Folder ID");//Replace Folder ID with your own folder
folder.createFile(blob).setName("Image " + (index + 1) + ".png");
screenshots.push(response.contentUrl);
});
return screenshots;
}
I have made https://github.com/Nashev/CreatePNGSequenceForSlides plugin to call https://developers.google.com/slides/reference/rest/v1/presentations.pages/getThumbnail for each slide with little GUI
It can be used with a huge presentation, to overcome Google limits for script executing time and a "getThumbnail" call count.
