如何在谷歌驱动器中将图像和文本组合成一个 blob答案

【问题标题】：How to combine image and text into one blob in google drive如何在谷歌驱动器中将图像和文本组合成一个 blob
【发布时间】：2014-11-09 00:32:11
【问题描述】：

我正在尝试使用 Google Apps 脚本创建自己的条形码标签。我能够检索条形码的图像 blob，但我希望能够向其中添加另一行文本。是否可以组合或编辑图像 blob？如果是这样，人们将如何去做。

这是我目前获取条形码的代码。

function createLabel() {
  var url = "http://www.barcodesinc.com/generator/image.php?code=20-001-001&style=196&type=C128B&width=200&height=100&xres=1&font=3"
  var image = UrlFetchApp.fetch(url).getBlob();
  DriveApp.createFile(image);
}

我知道条形码的下方有数据编号，但我需要使该编号更大且更易于阅读。

我尝试创建一个文档并插入文本和图像，但它只是像我需要的那样打印。

【问题讨论】：

标签： google-apps-script google-drive-api

【解决方案1】：

Google 尚未在 Apps 脚本中提供任何图像处理方法。也许当 Google Draw 支持应用程序脚本时，您可以使用某些东西以编程方式将图像插入绘图并向其添加文本，但现在您必须创建自己的临时解决方案。

您没有指定最终目标是什么 - 一张相同的标签、一张不同的标签或显示在屏幕上供用户保存/下载的单个标签。但这里有一些想法可以尝试：

创建一个单页的 Google 文档，其中包含一个表格，当打印完全适合您的标签。你可能不得不修补带有边距、表格和单元格尺寸、边框等以使其适合标签。该文档将成为您的模板。您的脚本将创建一个此文档的副本，并将您的条形码图像和文本插入表格单元格。学习Google Apps Script Drive Service 和Google Apps Script Document Service 您可以在代码中使用的方法参考。
如果您的目标是将单个标签输出到屏幕以供用户使用保存/下载，探索 HTML5 Canvas 元素和/或 Canvas- 或用于绘制图像的 SVG 操作客户端 JavaScript 库在屏幕上并向其添加文本。我没有使用这些技术很多，所以不能推荐一个明确的资源，但请参阅this SO question 对于初学者。还可以查看这些 js 库： EaselJS、HTML Canvas Javascript Library 和 Fabric.js

最后说明：您使用的条形码生成器 -barcodesinc.com - 允许您生成没有文本和/或边框的条形码。这可能是您想要的标签 - 在标签上出现两次代码文本没有意义。

【讨论】：

感谢您的回复，我整个周末都在谈论这个问题。我想我可以用 HtmlService 实现我的目标。不是最终输出的图像处理。我的最终输出是当一个项目进入库存系统时，它会打印它的条形码。我已经尝试过制作文档，但您无法将页面大小调整到足以在标签打印机上打印。我会发布最终结果。
是的，如果您使用特殊的标签打印机，则无法将 google 文档页面格式化为预期大小。但是这些打印机通常带有专用软件，通常允许您导入库存代码列表，它会为您生成和打印标签。在这种情况下，您只需将商品代码存储在您的库存系统中，并能够导出这些商品的列表。如果您的打印机使用长条连续标签纸，您可能会使用 Apps 脚本生成一个包含所有条形码和文本的固定宽度的长 html 页面并打印...

【解决方案2】：

这是我目前对自己问题的解决方案。使用 HtmlService 我可以创建我需要的“文档”。并打印出来。 html 的打印票和样式需要一些微调，但这会起作用。

“CloudPrintLib”是我通过 Apps 脚本连接到 Google 云打印的解决方案，请参阅此博客文章以供参考。 http://ramblings.mcpher.com/Home/excelquirks/guests/cloudprint

function createLabelDoc() {
  var url = "http://www.barcodesinc.com/generator/image.php?code=20-001-001&style=196&type=C128B&width=200&height=100&xres=1&font=3";
  var html = HtmlService.createHtmlOutput().setTitle('HtmlAlseLabel');
  html.append('<p>20-001-001</p><br>');
  html.append('<img src="http://www.barcodesinc.com/generator/image.php?code=20-001-001&style=196&type=C128B&width=200&height=100&xres=1&font=3"/>')
  //DriveApp.createFile(html.getBlob().setName('HTMLBarcode'));

  var ticket = {
        version: "1.0",
        print: {
          duplex: {
            type: "NO_DUPLEX"
          }
        }
      }


  Logger.log(CloudPrintLib.submit("printeridhere", html.getTitle(), ticket, html.getBlob()));
}

感谢 azawaza 帮助我们思考这个问题。

【讨论】：