1

I have been hacking together data and scripts from lots of posts and I finally got something that is SO close to working, but I am having an issue on the home straight....

I am using the dom-to-image library to turn my Container div in to a blob so that I can save to my google drive

Javascript:

btn.onclick = function() {
      domtoimage.toPng(document.getElementById('app')).then(function (dataUrl)
      {
         base64 = dataUrl.replace(/^.*,/, "");
         console.log(base64);
         google.script.run.withSuccessHandler(e => console.log(e)).saveFile(dataUrl); 
      });
}

And this generates a string that when I check it with https://codebeautify.org/base64-to-image-converter it looks correct and I can download that image as a PNG is all good.... BUT....

Then I send it to my GS function:

function saveFile(e) {
    var blob = Utilities.newBlob(e, MimeType.PNG, "layout.png");
    DriveApp.createFile(blob);
    return "Done.";
}

And this seems to work, in that it creates an "image" file on my google drive that is similar size to the downloaded test image from Code Beautify...

However, google will not preview it and when I downloaded it Photoshop says its not a PNG file and any other image program wont read it either :(

Where am I going wrong? Is it the MimeType syntax? (I have tried a few). Is it raw blob data? Help?

Rubén
  • 34,714
  • 9
  • 70
  • 166
Different Gravity
  • 153
  • 12
  • 1
    In your script, how about using `base64` at `google.script.run.withSuccessHandler(e => console.log(e)).saveFile(dataUrl);`? It seems that you are using `dataUrl` at there. If `base64` is the correct base64 data, I think that your script works by this modification. Can you test it? – Tanaike Jul 20 '20 at 02:23
  • @Tanaike - Hi. I tried that before (but just tried again to make sure). And I get the same result... it all goes through but then errors in photoshop and google will not preview it From what I can see the only difference is the dataUrl still has `data:image/png;base64,` in front of of the data - but google takes it either way – Different Gravity Jul 20 '20 at 02:32
  • Thank you for replying. Now I noticed one more modification. I apologize for it. In this case, I will show you by an answer. Could you please wait for it? – Tanaike Jul 20 '20 at 02:33
  • 1
    I posted it as an answer. Could you please confirm it? – Tanaike Jul 20 '20 at 02:39
  • [tag:gas] is being discussed on Meta -> [What can be done to prevent \[gas\] tag ambiguity?](https://meta.stackoverflow.com/q/399396/1595451). In the meantime, it should not be used on questions about Google Apps Script that are not related to [tag:assembly] – Rubén Jul 22 '20 at 17:07

1 Answers1

1

In your script, I think that there are 2 modification points.

Modification points:

  1. At HTML&Javascript side, base64 of base64 = dataUrl.replace(/^.*,/, "") is not used with google.script.run.withSuccessHandler(e => console.log(e)).saveFile(dataUrl).
  2. At Google Apps Script side, the base64 data is not decoded.

When above points are reflected to your script, it becomes as follows.

Modified script:

HTML&Javascript side: 
btn.onclick = function() {
      domtoimage.toPng(document.getElementById('app')).then(function (dataUrl)
      {
         base64 = dataUrl.replace(/^.*,/, "");
         console.log(base64);
         google.script.run.withSuccessHandler(e => console.log(e)).saveFile(base64);  // Modified
      });
}
Google Apps Script side: 
function saveFile(e) {
  var bytes = Utilities.base64Decode(e);  // Added
  var blob = Utilities.newBlob(bytes, MimeType.PNG, "layout.png");  // Modified
  DriveApp.createFile(blob);
  return "Done.";
}

References:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • 1
    Note that [the library they are using](https://github.com/tsayen/dom-to-image#usage) has a `toBlob` method, no need to go the horrible way of creating a base64 data URL to then reparse it as binary data. – Kaiido Jul 20 '20 at 02:40
  • Thanks @Kaiido - I actually started with that, but was going back and fourth trying to learn as I went, and it just ended up with PNG by the time I taught myself enough to get past all the errors. – Different Gravity Jul 20 '20 at 02:46
  • 1
    But as usual, Tanaike for the win.... I think Tanaike is who I want to be when I grow up. – Different Gravity Jul 20 '20 at 02:46
  • Hey Tanaike, this is not the original problem, but connected to it - How do I return the file ID after I run `DriveApp.createFile(blob);` ? I cant seem to find anything on the google api if I can return the ID or not.... – Different Gravity Jul 20 '20 at 11:25
  • I Got it - Quite simple in the end: `layoutfile = DriveApp.createFile(blob); layoutfile.getId();` – Different Gravity Jul 20 '20 at 11:59