谷歌文档附加组件-处理图像

Google Docs Add-On - Dealing with Images

本文关键字：处理 图像 组件 文档 谷歌      更新时间：2023-09-26

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

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

我知道如何获得图像选择(从GS代码)并触发菜单项和对话框。我也知道如何做所有我的自定义代码的事情。

I need to know:

  • 如何获得原始图像URL(或提取它作为一个base64字符串)，我可以放在画布
  • 替换图像并保存在文档中
  • 以每张图像为基础保存元数据，以便可以重新编辑。
示例将是很棒的，尽管文档链接也很棒。我发现了很多东西，但没有具体的关于如何提取数据的任何东西，但blob。

这个答案是一个正在进行的工作。开始一个答案，把我想出来的部分。如果有人帮我找出缺失的部分，我将接受他们的而不是这个)。

如何获取原始图像URL(或将其提取为base64字符串)

据我所知，没有办法获得默认URL。然而，我能够得到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编译器的限制。在Apps Script中使用base64编码的图像

相关文章：