Google Sheet/Google Script - 在图片上绘制点

Question

Google Sheet/Google Script - 在图片上绘制点

Yar*_*iet 2 plot draw google-sheets google-apps-script

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

我有一张这样的表：

| 身份证 | 名称 | X 坐标。| Y 坐标。|

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

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

提前致谢！

编辑。这就是我需要的：

我的床单

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

Run Code Online (Sandbox Code Playgroud)

我的照片

Answer 1

Tan*_*ike 5

我相信您目前的情况和您的目标如下。

您有一张 512 x 512 像素的图像。
- 图像文件放置在您的 Google 云端硬盘中。
您想要通过从电子表格中的“C”和“D”列检索到的坐标来绘制图像上的点。
您想要放置从“B”列检索的文本。
您希望使用 Google Apps 脚本来实现此目的。

问题和解决方法：

不幸的是，在现阶段，还没有直接编辑图像并将文本和形状放入 Google Apps 脚本方法中的方法。所以在这种情况下，就需要使用变通办法。

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

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

用法：

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

1. 安装 Google Apps 脚本库。

请安装以下 Google Apps 脚本库。您可以在此处查看安装库的官方文档。

图像应用程序
- 您可以在此处查看用于安装库的项目密钥。
文档服务应用程序
- 您可以在此处查看用于安装库的项目密钥。

2. 启用API：

请在高级 Google 服务中启用 Google Slides API。

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);
}

Run Code Online (Sandbox Code Playgroud)

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