Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

357
Views
No se puede ejecutar window.URL.createObjectURL(blob) para mostrar un archivo .png

Estoy usando una API para recuperar un archivo .png. Cuando trato de crear una URL para poder mostrarla en mi HTML, la llamada falla con el siguiente error:

userCodeAppPanel: 94 TypeError no detectado: no se pudo ejecutar 'createObjectURL' en 'URL': la resolución de sobrecarga falló.

Estoy llamando a mi api con este código (usando Google Apps Script):

 function retrieveAdmiraltyTideGraph(tideStationName, dateFrom, numDays){ //get tide station code from tide station name passed from user input let tideStationCode = getTideStationCode(tideStationName) var url = _admiraltyURL + "Stations/" + tideStationCode + "/TidalHeightGraph?dateTime=" + dateFrom + "&duration=" + numDays; url = url + "&width=500&height=200" var response = UrlFetchApp.fetch(url, _admiraltyRequestHeader); var responseCode = response.getResponseCode() var blob = response.getBlob() Logger.log("graph response" + responseCode) Logger.log(blob.getContentType()) return blob }

La llamada a la API es exitosa ya que el registrador muestra un código de retorno correcto, la verificación del tipo de contenido del blob muestra que es "imagen/png" como se esperaba.

Llamo a la función api desde Java Script usando:

 google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays);

y la llamada de función para mostrar la imagen recuperada es:

 function showGraph(blob){ var url = window.URL.createObjectURL(blob); document.getElementById("graph").src = url }

Esto está fallando cuando intento obtener la URL.

Soy bastante nuevo en JS y Google Apps Script, por lo que es posible que me esté equivocando en algo, pero tengo funciones muy similares que pasan y procesan matrices entre un controlador de API, el código del servidor y el código del cliente.

¿Alguna sugerencia?

Gracias

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puntos de modificación:

  • En su lado de Google Apps Script, el blob se devuelve al lado de Javascript. Desafortunadamente, en la etapa actual, el blob de Google Apps Script no se puede usar directamente en el lado de Javascript. Pensé que esta podría ser la razón de su problema.

En su situación, ¿qué tal la siguiente modificación?

Guión modificado:

Lado de Google Apps Script:

De:

 return blob

A:

 return `data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`;

Lado HTML y Javascript:

De:

 function showGraph(blob){ var url = window.URL.createObjectURL(blob); document.getElementById("graph").src = url }

A:

 function showGraph(url){ document.getElementById("graph").src = url }
  • En esta modificación, se supone que la etiqueta como <img id="graph"> existe en su HTML. Por favor tenga cuidado con esto.

Referencia:

  • codificar base64 (datos)

Adicional:

Del graph de document.getElementById("graph") , pensé que tal vez quisiera mostrar la imagen. Pero, si desea que el usuario descargue el archivo de Google Apps Script, ¿qué tal la siguiente modificación?

Guión modificado:

Lado de Google Apps Script:

De:

 return blob

A:

 return [`data:${blob.getContentType()};base64,${Utilities.base64Encode(blob.getBytes())}`, blob.getName()];

Lado HTML y Javascript:

 <input type="button" value="download" onclick="sample()"> <script> function sample() { google.script.run.withSuccessHandler(showGraph).withFailureHandler(onFailure).retrieveAdmiraltyTideGraph(selectedStation, dateFrom, numDays); } function showGraph([url, filename]){ fetch(url) .then(res => res.blob()) .then(blob => { var a = document.createElement("a"); var url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); }); } function onFailure(e) { console.log(e) }
  • En esta modificación, cuando se hace clic en el botón, el archivo se descarga recuperando los datos de Google Apps Script.
  • En este caso, configure las variables de selectedStation, dateFrom, numDays en el lado de Javascript.
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!