Google Sheet/Google 脚本 - 在图片上绘制点

Question

我在谷歌上搜索了很多次，但找不到任何答案。

我有一个 sheet 这样的：

| ID | Name | X Coord. | Y Coord. |

我有一张自定义图片（它基本上是一张地图）512x512，我需要根据 X/Y 坐标绘制点。

有什么方法可以在 Google Sheet 上做到这一点吗？我愿意接受任何可能的解决方案（甚至包括 html）

提前致谢！

EDIT.This是我需要的：

我的sheet

| ID | Name | X Coord. | Y Coord. |
| 1  | AAA  |    0     |    0     |
| 2  | BBB  |   512    |   512    |
| 3  | CCC  |   256    |   256    |

我的图片

Answer 1

我相信你的现状和你的目标如下。

您有一张 512 x 512 像素的图像。
- 图像文件已放入您的 Google 驱动器中。
您想通过从电子表格中的“C”列和“D”列中检索到的坐标绘制图像上的点。
您想将从列“B”中检索到的文本放入。
您想使用 Google Apps 脚本实现此目的。

问题和解决方法：

遗憾的是，在目前阶段，还没有直接编辑图像并将文本和形状放入Google Apps Script 方法中的方法。所以在这种情况下，需要使用变通方法。

幸运的是，我在我的博客中发布了一篇关于“使用 Google Apps 脚本在图像上插入文本”的报告。 Ref 我认为在您的情况下，这可能可以用作解决方法。此解决方法的流程如下。

从图像文件中检索 blob。
检索图像大小。
- 在这种情况下，使用 ImgApp 的 Google Apps 脚本库。
新建Google页面大小与图像大小相同的幻灯片。
- 在这种情况下，使用 DocsServiceApp 的 Google Apps 脚本库。
插入图片。
从电子表格中检索坐标。
使用坐标绘制点到 Google 幻灯片。
从 Google 幻灯片中检索图像 blob。

用法：

在这种情况下，假设您已经拥有 Google Apps 脚本项目。如果您没有 Google Apps 脚本项目，请创建它。例如，您还可以从 Google 电子表格上的脚本编辑器创建它。

1。安装 Google Apps 脚本库。

请安装以下 Google Apps 脚本库。您可以在 here.

查看安装库的官方文档

ImgApp
- 您可以在here看到安装库的项目密钥。
DocsServiceApp
- 您可以在 here 查看安装库的项目密钥。

2。启用 API：

Please enable Google Slides API at Advanced Google services.

3。示例脚本：

请将以下脚本复制并粘贴到 Google Apps 脚本的脚本编辑器中，并设置变量。

function myFunction() {
  const fileIdOfImage = "###"; // Please set the fileID of image.
  const spreadsheetId = "###"; // Please set the Spreadsheet ID of image.
  const sheetName = "Sheet1"; // Please set the sheet name.
  const outputFilename = "sample.png"; // Please set the output image filename.

  // 1. Retrieve blob from an image file.
  const blob = DriveApp.getFileById(fileIdOfImage).getBlob();

  // 2. Retrieve the image size.
  const { width, height } = ImgApp.getSize(blob);

  // 3. Create new Google Slides with the page size which is the same with the image size.
  const object = { title: "temp", width: { unit: "pixel", size: width }, height: { unit: "pixel", size: height } };
  const id = DocsServiceApp.createNewSlidesWithPageSize(object);

  // 4. Insert the image.
  const s = SlidesApp.openById(id);
  const slide = s.getSlides()[0];
  const image = slide.insertImage(blob);

  // 5. Retrieve the coordinates from Spreadsheet.
  const sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);
  const values = sheet.getRange("B2:D" + sheet.getLastRow()).getValues();

  // 6. Plot the points using the coordinates to Google Slides.
  const pointSize = 8;
  const fontSize = 10;
  const boxSize = 60;
  values.forEach(([v, x, y]) => {
    let px = (x / 1.33333) - (pointSize / 2);
    let py = (-1 * (y - height) / 1.33333) - (pointSize / 2);
    slide.insertShape(SlidesApp.ShapeType.ELLIPSE, px, py, pointSize, pointSize).getFill().setSolidFill("#ff0000");
    const textBox = slide.insertTextBox(v, px - (boxSize / 2) + (pointSize / 2), py - (boxSize / 2) + (pointSize / 2), boxSize, boxSize);
    textBox.setContentAlignment(SlidesApp.ContentAlignment[(px < 0 && py > 0) || (px > 0 && py > 0) ? "TOP" : "BOTTOM"]);
    const text = textBox.getText();
    text.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment[(px > 0 && py < 0) || (px > 0 && py > 0) ? "START" : "END"]);
    text.getTextStyle().setFontSize(fontSize);
  });
  slide.group([image, ...slide.getShapes()]);
  s.saveAndClose();

  // 7. Retrieve the image blob from Google Slides.
  const obj = Slides.Presentations.Pages.getThumbnail(id, slide.getObjectId(), {"thumbnailProperties.thumbnailSize": "LARGE"});
  const outputBlob = UrlFetchApp.fetch(obj.contentUrl.replace("=s1600", "=s" + width)).getBlob().setName(outputFilename);
  DriveApp.createFile(outputBlob);
  DriveApp.getFileById(id).setTrashed(true);
}

当上述脚本为运行时，从fileIdOfImage的图像文件中检索图像blob，并从spreadsheetId和[=的电子表格中检索用于绘制点的坐标13=]。然后，将它们合并并输出为 outputFilename.
当您要更改字号和磅值时，请调整fontSize、pointSize和boxSize的变量。

示例输入和输出图像。

示例输入数据。

电子表格：

图片：

此图片大小为 512 x 512 像素。

示例输出数据。

当上述输入数据与上述示例脚本一起使用时，将获得以下结果。这个情节的起源是左下角。这是来自您的示例图片。

注：

这是一个简单的示例脚本。所以请根据您的实际情况进行修改。

参考文献：

Google Apps 脚本库
- ImgApp
- DocsServiceApp
Google Slides API

Google Sheet/Google 脚本 - 在图片上绘制点

Google Sheet/Google Script - Plotting points over a picture

plot

draw

google-sheets

google-apps-script