Estoy tratando de obtener un lienzo HTML en la hoja de cálculo de Google. Encontré un bloc de notas simple que usa solo html, css y javascript. Creo un cuadro de diálogo personalizado e incorporo el bloc de notas en él. Eso funciona bien. Ahora quiero enviar a la hoja de cálculo de Google. Lo que tengo hasta ahora es:
En mi HTML:
<canvas id="drawing-board"></canvas> En mi <script> :
const canvas = document.getElementById('drawing-board'); var url = canvas.toDataURL("image/jpeg", 1.0); google.script.run.receiveDataURL(url);En Código.gs:
function receiveDataURL(url) { try { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sh = ss.getSheetByName("Sheet2"); var blob = Utilities.newBlob(Utilities.base64Decode(url), 'image/jpg', 'MyImageName'); sh.insertImage(blob,1,1); } catch(err) { console.log(err); } }Si solo inserto Imagen (url, 'imagen/jpg') obtengo un cuadro negro. Debe ser blanco con algún garabato.
¿Algunas ideas?
Como otra respuesta, el método de "insertar imagen" puede usar directamente la URL de datos. Por lo tanto, su secuencia de comandos se puede modificar de la siguiente manera.
function receiveDataURL(url) { try { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sh = ss.getSheetByName("Sheet2"); sh.insertImage(url,1,1); } catch(err) { console.log(err); } }Como muestra de HTML y Javascript, puede probar esto usando el siguiente Javascript.
<canvas id="drawing-board"></canvas> <script> const canvas = document.getElementById('drawing-board'); canvas.width = 100; canvas.height = 50; // Sample rectangle image is put. const context = canvas.getContext("2d"); context.beginPath(); context.rect(0, 0, 100, 50); context.fillStyle = "#FF0000"; context.fill(); // Retrieve the data URL. var url = canvas.toDataURL("image/jpeg", 1.0); google.script.run.receiveDataURL(url); </script>