Google文档加载项 - 处理图片

Question

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

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

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

我需要知道：

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

示例很棒，但文档链接也很棒。我发现了很多东西，但没有具体的解决方法如何将数据提取为blob。

Answer 1

（这个答案是一个正在进行的工作。在我弄清楚的时候开始回答把这些比特放进去。如果有人帮我找出缺失的部分，我会接受他们而不是这个部分）

如何获取原始图像URL（或将其解压缩为base64字符串）

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

Code.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