将HTML画布放入Google电子表格 [英] Get HTML Canvas into Google Spreadsheet

问题描述

我正在尝试将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电子表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！