Insert image from URL into Google Docs

debugcn Published at Dev

hbbz040

I am trying to get image from external link and add in a document.

Html service work fine. However, document should fill out after onload function.

How can I fix it ?

code.gs

function doGet(e){
  var content = HtmlService.createHtmlOutputFromFile('index').getContent();
  return HtmlService.createHtmlOutput(content);
}

function im(baseUrl){
  var resp = UrlFetchApp.fetch(baseUrl); 
  var docID = "0000xxxxx1111"
  var doc = DocumentApp.openById(docID);
  doc.getChild(0).asParagraph().appendInlineImage(resp.getBlob());
  return baseUrl; 
}

index.html

<!DOCTYPE html>
<head>
<base target="_top">
<script>
  window.onload = function() {
    var url = "http://xxx.co/image.png"
    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 100;
    document.getElementById('barcode').appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var image = new Image();
    image.src = url;
    ctx.drawImage(image, 0, 0);
    google.script.run.withSuccessHandler(function(a) {
       document.getElementById("imageid").src=a;
    }).im(canvas.toDataURL());
    }
</script>
</head>
<body>
   <img id="imageid" src="" alt="image">
</body>
</html>

Jordan Rhea

There are a few problems with your HTML which is why it probably isn't working. You also had not tagged any elements with the barcode id.

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>

  <body id="barcode">
     <img id="imageid" src="" alt="image">
  </body>

  <script>
    window.onload = function() {
      var url = "http://lorempixel.com/400/200/"
      var canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 100;
      document.getElementById('barcode').appendChild(canvas);
      var ctx = canvas.getContext('2d');
      var image = new Image();
      image.src = url;
      ctx.drawImage(image, 0, 0);
      google.script.run.withSuccessHandler(function(a) {
         document.getElementById("imageid").src=a;
      }).im(canvas.toDataURL());
    }
  </script>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.