【问题标题】：Google Docs Add-On - Dealing with ImagesGoogle Docs 插件 - 处理图像
【发布时间】：2015-06-10 06:21:07
【问题描述】：

我正在尝试创建一个 Google 文档插件，其中有人：

选择图像
点击菜单项
将显示一个对话框，其中使用几个工具显示图像（在画布上）
使用工具修改画布
画布数据已保存并替换原始图像
图像的元数据已保存，因此可以从原始图像重新编辑。

我知道如何获取图像选择（来自 GS 代码）并触发菜单项和对话框。我也知道如何做我所有的自定义代码。

我需要知道：

如何获取可以放入画布的原始图像 URL（或将其提取为 base64 字符串）
替换图像并将其保存在文档中。
保存每个图像的元数据，以便重新编辑。

示例很棒，但文档链接也很棒。我发现了很多东西，但没有具体说明如何将数据提取为除了 blob 之外的任何东西。

【问题讨论】：

标签： javascript image canvas google-docs google-docs-api

【解决方案1】：

（这个答案是一个正在进行中的工作。开始一个答案，以便在我弄清楚这些位时将它们放好。如果其他人帮助我找出丢失的位，我会接受他们的而不是这个）。

如何获取原始图片URL（或提取为base64字符串）

据我所知，没有办法获取默认 URL。但是，我能够获得 base64 字符串。这有点令人费解，但有效。

代码.gs

// Gets an InlineImage in some way. I'm using the currently selected image,  
// but that's irrelevant to the code sample.
// @return {InlineImage}
function getImage() {
    // gets the InlineImage element somehow
}

// Gets the actual data URI.
// Note: this function uses image/png only. You can change this by changing
// it in the two places, or using a variable. Just be sure the two spots 
// match.
// @return {string}
function getDataUri() {
    return 'data:image/png;base64,' + Utilities.base64Encode(getImage().getAs('image/png').getBytes());
}

MyDialogJavaScript.html

$(function () {
    google.script.run
   .withSuccessHandler(function (data) { console.log(data); })
   .withFailureHandler(function (err) { console.log('failure: ' + err); })
   .getDataUri();
});

重要提示：创建对话框时必须使用 SandboxMode.IFRAME，否则您会得到如下信息：

Rejecting <img>.setAttribute('src', blahblahblah

这显然是由于通常使用的 Caja 编译器的限制。请在此处查看答案以获取更多信息：Using base64-encoded images with HtmlService in Apps Script

【讨论】：