将 URL 中的图片插入 Google Docs答案

【问题标题】：Insert image from URL into Google Docs将 URL 中的图片插入 Google Docs
【发布时间】：2017-06-02 04:10:56
【问题描述】：

我正在尝试从外部链接获取图像并添加到文档中。

HTML 服务工作正常。但是，文件应该在onload函数之后填写。

我该如何解决？

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>

【问题讨论】：

标签： javascript html image google-apps-script google-docs

【解决方案1】：

您的 HTML 存在一些问题，这就是它可能无法正常工作的原因。您还没有使用条形码 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>

【讨论】：