如何从自定义对话框获取 HTML Canvas 到 Google 电子表格

Question

我找到了一个简单的涂鸦板，它只使用 <canvas>、html、css 和 javascript。我创建了一个自定义对话框并将涂鸦板合并到其中。那很好用。现在我想将图像发送到 Google 电子表格。我到目前为止是：

在我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing app</title>
    <?!= include("CSS_Scribbler"); ?>
</head>
<body>
    <section class="container">
        <div id="toolbar">
            <h1>Draw.</h1>
            <label for="stroke">Stroke</label>
            <input id="stroke" name='stroke' type="color">
            <label for="lineWidth">Line Width</label>
            <input id="lineWidth" name='lineWidth' type="number" value="5" min="1" max="10">
            <button id="clear">Clear</button>
            <button id="submit">Submit</button>
        </div>
        <div class="drawing-board">
            <canvas id="drawing-board"></canvas>
        </div>
    </section>
    <?!= include("JS_Scribbler"); ?>
</body>
</html>

在我的 <script>:

<script>
  const canvas = document.getElementById('drawing-board');
  const toolbar = document.getElementById('toolbar');
  const ctx = canvas.getContext('2d');

  const canvasOffsetX = canvas.offsetLeft;
  const canvasOffsetY = canvas.offsetTop;

  canvas.width = window.innerWidth - canvasOffsetX;
  canvas.height = window.innerHeight - canvasOffsetY;

  let isPainting = false;
  let lineWidth = 5;
  let startX;
  let startY;

  toolbar.addEventListener('click', e => {
    if (e.target.id === 'clear') {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    else if (e.target.id === 'submit') {
      try {
        var url = canvas.toDataURL("image/jpeg", 1.0);
        google.script.run.receiveDataURL(url);
      }
      catch(err) {
        alert(err);
      }
    }
  });

  toolbar.addEventListener('change', e => {
    if(e.target.id === 'stroke') {
      ctx.strokeStyle = e.target.value;
    }

    if(e.target.id === 'lineWidth') {
      lineWidth = e.target.value;
    }
  });

  const draw = (e) => {
    if(!isPainting) {
      return;
    }

    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
    ctx.stroke();
  }

  canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    startX = e.clientX;
    startY = e.clientY;
  });

  canvas.addEventListener('mouseup', e => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
  });

  canvas.addEventListener('mousemove', draw);
</script>

在Code.gs中：

function receiveDataURL(url) {
  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sh = ss.getSheetByName("Sheet1");
    sh.insertImage(url,1,1);
  }
  catch(err) {
    console.log(err);
  }
}

在我的自定义对话框中，这是我看到的：

但这是我在电子表格中得到的：

Answer 1

当以 JPEG 格式检索图像时，默认颜色为黑色。当我看到你的问题时，当你用黑色画线时，黑色矩形被检索为 JPEG 数据。我认为这可能是您遇到问题的原因。例如，如果你想确认脚本有效，下面的修改怎么样？

模式一：

将线条颜色从黑色改为其他颜色再测试

模式二：

更改输出 mimeType。在这种情况下，背景是透明的。所以你可以看到黑色的线。

来自

var url = canvas.toDataURL("image/jpeg", 1.0);

收件人：

var url = canvas.toDataURL("image/png", 1.0);

如何从自定义对话框获取 HTML Canvas 到 Google 电子表格

How to get HTML Canvas from Custom Dialog to Google Spreadsheet

google-apps-script

google-sheets

web-applications

html5-canvas

模式一：

模式二：

来自

收件人：