将HTML画布放入Google电子表格

Get HTML Canvas into Google Spreadsheet(将HTML画布放入Google电子表格)

本文介绍了将HTML画布放入Google电子表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将HTML画布放入Google电子表格。我发现了一个简单的涂鸦板,它只使用html、css和javascript。我创建了一个自定义对话框,并将Scrible Pad合并到其中。那很好用。现在我想发送到Google电子表格。到目前为止,我所拥有的是:

在我的HTML中:

<canvas id="drawing-board"></canvas>

在我的<script>中:

const canvas = document.getElementById('drawing-board');
var url = canvas.toDataURL("image/jpeg", 1.0);
google.script.run.receiveDataURL(url);

在Code.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);
  }
}

如果我只插入图像(url,‘image/jpg’),我会得到一个黑盒。它应该是白色的,上面有一些涂鸦。

有什么想法吗?

推荐答案

作为另一个答案,";insert";方法可以直接使用data URL。因此可以按如下方式修改您的脚本。

修改后的脚本:

function receiveDataURL(url) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sh = ss.getSheetByName("Sheet2");
    sh.insertImage(url,1,1);
  }
  catch(err) {
    console.log(err);
  }
}
  • 作为示例HTML&;Javascript,您可以使用以下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>
    
    • 运行此脚本时,会将一个红色矩形放到";Sheet2";中。

引用:

  • insertImage(url, column, row)

这篇关于将HTML画布放入Google电子表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:将HTML画布放入Google电子表格

基础教程推荐