0

I am trying to use a Google Sheets script to generate a new Google form based on data inside a sheet. However I need to style some of the questions with some specific CSS. Since I cannot set the styling of question text in a Google form, I was thinking that I could generate the styled HTML and convert that to an image and add the image to the Google form.

So, I'm able to generate the styled HTML, and I can save the html file and it looks exactly as I want it to. But I can't seem to figure out how to convert that into an image blob that I can set in the form.

I want to do something like:

var form = FormApp.create("test");
var imageItem = form.addImageItem();
var img = generateImage(page.scenario, page.title);
imageItem.setImage(img);

function generateImage(scenario, name) {
  var t = HtmlService.createTemplateFromFile('index');
  t.data = scenario;
  var htmlOutput = t.evaluate();
  //do something to generate an image from the HTML
  return htmlOutput;
}

This code as-is gives me an error "Blob object must have an image content type for this operation".

Any thoughts on how to convert the html into an image that can serve as a valid Blobsource? Or maybe there's an html-side solution making use of some javascript library? FYI I'm trying to do this as a "batch" for many images, so I don't want to have to wait for user action as part of this.

user10355305
  • 1
  • 2
  • Possible duplicate of [Render HTML to an image](https://stackoverflow.com/questions/10721884/render-html-to-an-image) – Kos Sep 12 '18 at 20:43
  • I've not been able to make the solutions listed there work within the context of google apps script, but perhaps that's due to my lack of knowledge? Would appreciate some specific pointers/examples – user10355305 Sep 12 '18 at 22:27
  • You can display your `htmlOutput` in modal window, then you can run JS inside it to render as image, see related docs: https://developers.google.com/apps-script/guides/dialogs#custom_dialogs – Kos Sep 13 '18 at 06:49
  • Thanks for your response. I've displayed the html in a modal for testing purposes, but I don't want to pop up the page in a modal every time - I'm trying to generate dozens of these. I just want programmatic access to the image as a blob. That's the sample code I'm looking for. – user10355305 Sep 13 '18 at 14:23
  • To do so you need some sort of headless browser to run your script in, which is not possible in case of using Google Apps Script environment unfortunately – Kos Sep 13 '18 at 19:57
  • OK. So let's say I do pop open a modal every time, generate the image (somehow), and then automatically close the modal. Could that work without user intervention? All the examples I've seen to generate the image also seem to have the user click a button, and download the image locally, which is not what I want to do – user10355305 Sep 13 '18 at 23:18
  • It can't work without user action – Kos Sep 14 '18 at 07:13
  • Got it, thanks for your advice, sounds like that modal pop-up approach will not work. Any other ideas? Or is this really just impossible? – user10355305 Sep 14 '18 at 15:21

0 Answers0