The image retrieved from Blob Data does not meet the specifications of a valid PNG file for download

After piecing together data and scripts from various sources, I have come so close to getting everything working perfectly. However, I've hit a snag on the final stretch...

My current task involves using the dom-to-image library to convert my Container div into a blob for saving to Google Drive.

Here is the JavaScript code snippet:

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); 
      });
}

The generated string looks correct when checked with , and I can download the image as a PNG successfully.... BUT....

When the data is sent to my GS function:

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

While the function seems to work and creates an "image" file on my Google Drive that is similar in size to the test image downloaded from Code Beautify, Google does not preview it properly. Additionally, Photoshop and other image programs cannot read it as a PNG file. Where am I going wrong? Is it the MimeType syntax or the raw blob data causing the issue?

javascriptgoogle-apps-scriptblobpng

Answer №1

After reviewing your script, I have identified 2 areas that could use modification.

Potential Modifications:

  1. On the HTML and Javascript side, it seems like the base64 data is not being utilized in the correct way with 
    google.script.run.withSuccessHandler(e => console.log(e)).saveFile(dataUrl)
    .
  2. On the Google Apps Script side, the base64 data appears to be missing a decoding step.

If you integrate the above suggestions into your script, it will look something like this.

Revised 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);  // Revised
      });
}
Google Apps Script side: 
function saveFile(e) {
  var bytes = Utilities.base64Decode(e);  // Added
  var blob = Utilities.newBlob(bytes, MimeType.PNG, "layout.png");  // Revised
  DriveApp.createFile(blob);
  return "Done.";
}

Helpful Resources:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying these sorting functions to my specific scenario

Hello everyone, I hope you can help me out with this issue. I have been struggling for hours trying to sort my array of objects in JavaScript based on a specific property, but I just can't seem to get it right. I have referred to some of the top post ...

javascriptstringtypescriptsortingobject

Extract the element from one array that is not present in another array

I am attempting to extract the values from arrayOne that do not appear in both groups within arrayTwo. In the example below, I am looking to identify b and d for group1 and a and b for group2. arrayOne = ['a','b','c',' ...

javascriptarrays

How can I modify the material and color of the result in Three.js CSG?

Upon creating a union of two meshes, I want to apply MeshLambertMaterial specifically on the object named 'result': var lathe = new THREE.Mesh(latheGeometry); var cube_bsp = new ThreeBSP( lathe ); var box = new THREE.BoxGeometry( 2,30,3); var ...

javascriptthree.jsthreecsg

Automatically initiate a click event when the page is loaded

I'm having trouble getting a click event to trigger on my controller when the page loads. I really just want the checkboxes to be clicked automatically. <!DOCTYPE html> <html > <head> <link rel="stylesheet" type="text/css" ...

javascriptangularjs

What are the possibilities of utilizing a variable that is stated within composition to enable dynamic rendering?

I'm working on a Vue.js v3 project using the composition API. I have defined a variable in my setup like this: setup() { const showInvoiceItemForm = true; return { showInvoiceItemForm }; }, Now, I want to show a form when a button is click ...

javascriptvue.jsvuejs3

What is the method to set up the "materializecss" modal with the "before" (beforeload) feature?

Trying to implement the modal functionality in my project using the materializecss framework but facing some challenges. I have created a popup modal for an image with the code below: HTML: <div class="media-insert"> <a href="#img2" class="moda ...

javascriptjquerycssmaterial-design

React not functioning properly when packaged with Webpack

I tried implementing React in the simplest way possible, but I am facing some issues. After bundling React and opening the index.html page, it shows up completely blank with no console errors to indicate any mistakes. Below is my webpack.config.js: const ...

javascriptreactjswebpack

Optimizing the way JavaScript is incorporated into Django templates for maximum efficiency

Before, I followed this structure in a template <html> ... <script> {% include "myapp/includes/jquery-1.7.1.min.js" %} {% include "myapp/includes/myscript.js" %} </script> ... However, this resulted in all the JavaScript code being vis ...

javascriptdjangotemplates

Is it possible to connect a JavaScript file to an HTML document within a React application?

I have been developing a React website with the following file structure: public: index.html second.html src: index.js second.js table.js forms.js The main page (index.js) contains both a form and a table. One of the columns in the table has a link t ...

javascripthtmlreactjsreact-nativedom

Identify the specific code that will be executed upon pressing a button - checkbox restriction

Check out my code example on jsfiddle: https://jsfiddle.net/elenderg/wzarrg06/63/ In the first div, there are 10 buttons. See image below: https://i.sstatic.net/BDdtG.png <button class='btn btn-info custom' onclick="myFunction()" ...

javascripthtmlcssdomcheckbox

Execute function when button is clicked in ExpressJS

I am looking to execute a function on my node server when a button on my website is clicked: What I currently have: Index.html (I have not included the entire content for simplicity) <button id="tv">tv</button> Client.js (Client side) const ...

javascriptnode.jsexpresslistener

full-page graphics with dynamic transition

I have been experimenting with creating a smooth fade-in and fade-out transition between two pages that feature full-screen images. My current approach involves using the swup plugin. To display a new full-screen image on each page, I assign a class to ev ...

javascripthtmlcssimagecss-transitions

What is the best way to extract all the data from a JSON using a shared key?

I'm trying to extract an array containing all the name values from a JSON structure. This is how my JSON data is structured: { "profile": { "G5j7": { "name": "siddharth", "age": &quo ...

javascriptnode.jsarraysjsonreactjs

Strategies for resolving minor validation challenges (Almost complete, just a few finishing touches needed ...)

This question was originally posted in Spanish on es.stackoverflow.com by Julian Dumitrel: I had planned to make a record, step by step, where I had 3 different steps all within one <form>. After finishing my form validator successfully, I encounte ...

javascriptjqueryhtmlformsvalidation

Measuring the height of a div element using Vuejs

Let me explain my current situation: I am trying to determine the height of a DIV component in order to dynamically inform its child component about its size. I have been working on implementing manual loading mode, but I have encountered an issue where t ...

javascriptcssvue.js

What is the proper way to request permission for allowing others to access the mailto function?

I want to create a feature where users can open email on click using JavaScript. However, I have encountered an issue with using the mailto function in Chrome, as it requires changing the handlers settings to make it work. My query is whether it is possib ...

javascripthtml

connecting with Google Analytics

We are looking to incorporate Google Analytics into a sizable .NET website. The website utilizes multiple master pages (4 or 5), so the plan was to insert the necessary JavaScript code into each master page. <script type="text/javascript">//<![CD ...

javascript.netgoogle-analytics

"Exploring the world of arrays and looping in

Can someone assist me with this issue? I am currently stuck in JS Arrays & Loops and I can't understand why it's not returning "0" when the function is empty. function sumArray (numbers) { // your code var numbers = [1, 2, 3, 4]; if (nu ...

javascriptarraysloops

What is the best way to locate posts from authors who are already part of the friends array?

I'm currently working on a task where I need to retrieve all posts from the friends list of a user and display them in descending order based on creation date. Below is the controller function responsible for fetching all posts from friends: async fu ...

javascriptmongodbmongoose

When a user clicks on an element, use jQuery to show a specific

I am looking to extract the Admission ID field within a separate function that triggers when a user clicks on a button. $(document).ready(function () { $.each(data.student, function (i, item){ trHTML += '<tr>'+ ...

javascriptphpjquery