Load Image from Google Sheets using Google Apps Script - google-apps-script

I have some data along with images in a Google Sheet.
I am sending the data as a JSON response and I have deployed the script as a web app.
I am using the code:
SpreadsheetApp.openByID("<sheet_id>").getSheets[0].getDataRange().getValues()
I am able to load the data properly but I am not able to load the images.
For the cells with image, I get Empty String.
Can you please suggest a way to load images using the same script?
If it can provide a URL to my image saved in the sheet, then also it will solve my problem as I just wan't to display the image.

At the moment, you can obtain the image URL but under very special conditions:
The image has to be defined as an "Over cell" image (it cannot be an "In-cell image", as they are not supported by Apps Script).
The images have to be inserted by URL (not by uploading it from your local system).
The way to do it would be to:
Obtain the Sheet you want the images of.
Obtain its images using the getImages() method.
Obtain the URL of each image by using the getUrl() method.
If you are interested in the possibility of obtaining "in-cell" images more easily, I suggest you visit the feature requests in the Google's Public Issue Tracker or consider creating a brand new one.

Related

Keep original image file name when exporting google doc to html

I'm building an app that exports google docs to websites but I can't get original file names.
Steps:
Create a google doc, insert a drive image through Insert -> Image -> Drive.
Use google drive api to export the doc to html (Ruby: https://googleapis.dev/ruby/google-api-client/latest/Google/Apis/DriveV3/DriveService.html#export_file-instance_method)
Extract the images from the html, you'll always get srcs similar to https://lh3.googleusercontent.com/zUmjDlO9wBwiEMnegKwkh1VPGUaaVssRmWn6BvN_-WyD8ImK-s8rgwVkjmR1Zrsd89OcelYKArsHxy9CUXREoeUm5LgfxrUU0HZVa7d7BqcUsDh5E19I4AqwX_xIv_0Tyf5b4qZm
Download the image as you'd do for any file in the web. The "content-disposition" header always have "filename=Untitled.jpg" regardless of the original file name.
Anything I'm doing wrong? Is there a way to get the original file name?
Issue is that Google doc doesn't save any details from the image aside from the details below:
Thus when opened in another application, that app initializes the images' names into its own default image names (e.g image.jpg, Untitled.jng, etc.) as they didn't see any details about it. See a similar post.
Summary:
In short, you can't get the original filename by checking the details of the inserted image as Google docs doesn't store that data when you inserted it. Even before exporting, there is no way to determine the name of the inserted image in the document.
Workaround:
You could add a caption together with the image that contains a specific string (Figure <N>: <filename>) so that you could easily find them when extracting the images. Then when checking which caption is for a specific image, you just have to find the match of the specific string and the order of the image. This is definitely not the optimal approach but the simplest one to do and follow.

Google Drive API not displaying thumbnail

I have an app that uses the Google Drive API, and I need to display the thumbnails. But when I pass the link to an <img> tag it responds with a 404, but if I open the link manually in another tab in my browser it display just fine
You want to put the thumbnail of the file retrieved from Google Drive to your HTML.
The thumbnail link is retrieved by Drive API.
When you put it and open the HTML, 404 is returned. But when you directly access to the URL of the thumbnail link, you can see the image on your browser.
I believe your goal and your issue like above. For this, how about this answer?
Issue and workaround:
From your situation, I think that when you directly access to the thumbnail link, you might have logged in Google Account. By this, the image can be seen. And also, I thought that you might have used the following thumbnail link. This is the thumbnail link retrieved by Drive API.
https://docs.google.com/feeds/vt?gd=true&id={fileId}&v=1&s=###&sz=s220
Unfortunately, it seems that this link cannot be directly used at the HTML of outside. So in order to use the thumbnail at the HTML of outside, how about changing the endpoint?
Modified endpoint:
https://drive.google.com/thumbnail?sz=w640&id={fileId}
Please replace {fileId} of your file ID.
w640 means 640 pixels in the width. If you want to change the height, please useh instead of w.
Please share publicly the file you want to retrieve the thumbnail. It's On - Anyone with the link. By this, above link can be used. Please be careful this.
Note:
When the following HTML is used with the above link, the thumbnail can be seen.
<img src="https://drive.google.com/thumbnail?sz=w640&id={fileId}">

Google Script to replace image background color?

Looking to automate the tedious clicking to change the backround of my PNG images from white to transparent.
The images reside in Google Drive, and as new images are submitted I have to make it transparent, each time, again. There's got to be a better way!
I don't see any way to use that website with code. That website has what it calls an API, but it looks like it's nothing more than a link. You could use something like AutoIt, to reproduce the keystrokes that you manually do.
AutoIt website
If there was an online picture editor that had an API that would receive HTTP Requests, Apps Script can send and receive HTTP Requests.
Google Documentation urlFetch
But the online picture editor would also need to read your files from your Google Account.
HTML does have a canvas tag, that you can manipulate pictures with, but Apps Script currently doesn't work with the canvas HTML tag the last I knew.
You can access your Google Drive with Apps Script, and get files, but then you'd need to either send the file out somewhere, or process it yourself, just like that online picture editor does. If Caja would allow the HTML Canvas tag to work with HTML Service, there might be a way to automate what you want.
I created a way to re-size pictures with the Canvas tag, but it wouldn't work with Apps Script HTML Service.

Google maps display customer data in balloons without disclosing it (publicly or to Google)?

I'm trying to create a map of customer locations using Google maps.
It would be very convenient to display customer information in the balloons that pop up when you click a marker. However, some of that data should not be public, and the company would rather not disclose it to Google either.
I have access to (and can set up a server if need be) that runs something server side to generate .kml, Javascript, or serve a web page (including the js in that).
I've thought of a few ways to go about this. First is embedding html in .kml and having the contents of the balloon replaced by JavaScript making an asynchronous request to a private url/server. Unfortunately, it looks like JavaScript is stripped out if you are loading a .kml file by just putting the URL of the .kml file in the search box of google maps. I also found that it seems that iframes are also stripped out. One thing I do not know is if I set up a xhtml page that uses the Google maps API if that would let me load data from a private server directly to the browser without that data being loaded through Google.
One option that appears it will work is just putting a link in the .kml html for the balloon and having that link go somewhere. But that makes a whole extra step to see what the marker is, and diminishes the value of the whole thing in the first place.
So, is there a way to do what I'm attempting to do (load private data into the placemark bubbles directly to the user's browser instead of through Google)? If so, which option is the most maintainable/clean?
With Google's map API, you can write an (x)html page that loads a google map using javascript.
You can then have that javascript load data from a server directly to the browser (in something like JSON or XML) where the javascript can parse it and then add each point to the map. That way, the data does not route through Google's servers.

URL parameters stripped on Google Sites?

Using Google Apps Script gadget, I can use the parameters of the URL (http://sites.google.com/.../my-page?urlparameter=value&otherurlparameter=value) added to a Google Sites webpage to generate dynamic content.
But if you try to add a link to a page of a Google Site with parameters, and then save your page, the parameters are deleted : http://sites.google.com/.../my-page?urlparameter=value&otherurlparameter=value becomes http://sites.google.com/.../my-page. Same thing when trying to publish a webpage using Apps Script Service SitesApp.Page.setHtmlContent(yourHmtl).
It doesn't happen when using external URLs.
How can we bypass this limitation ?
It's possible to include relative links to pages including parameters.
Example :
in http://sites.google.com/.../home/page-1,
a link like http://sites.google.com/.../home/page-2?urlparameters will be overwritten without parameters but ../page-2?urlparameters won't be.