更新/替换Google文档中的内嵌图像

Question

我试图设置一项功能来更新Google文档上的图像，就像Lucidchart插件在其“更新的插入图表”功能上所做的一样。为此，我正在执行以下操作：

• 创建一个命名范围并将其ID存储在文档属性中，并与数据一起生成图像以供以后检索。
• 更新时，调用body.getNamedRangeById（）并将元素替换为新生成的图像。

这工作，但我不与Lucidchart发生以下问题：

• 每次更新，一个空行后的图像添加。
• 如果用户将图像拖放到文档中以重新定位图像，则命名范围消失，我无法稍后检索它。
• 如果用户集中的形象，更新后的图像又回到左边的位置，甚至抄袭其属性

有谁知道一个很好的策略，以替换/更新谷歌文档引用的图像，以同样的方式Lucidchart插件更新功能的作品？

感谢

时的范围内移动

Answer 1

NamedRanges确实迷路了，所以他们不适合您的方案非常好。但是没有其他识别元素的方式（这是Google Docs的一个很大的错误特征）。

在图像的情况下，您可以使用它的LINK_URL来标识它，这似乎是Lucidchart使用的。它不妨碍用户的方式，所以它可能是一个很好的解决方案。

关于在插入图像时获取空白行并丢失属性，我想（因为您没有共享任何代码），您直接将图像插入文档正文而不是段落。然后会自动创建一个段落以包裹图像，从而导致空行和属性丢失。

下面是一些代码示例：

function initialInsert() { 
    var data = Charts.newDataTable().addColumn(
    Charts.ColumnType.STRING, 'Fruits').addColumn(
    Charts.ColumnType.NUMBER, 'Amount').addRow(
    ['Apple',15]).addRow(
    ['Orange',6]).addRow(
    ['Banana',14]).build(); 
    var chart = Charts.newPieChart().setDataTable(data).build(); 

    var body = DocumentApp.getActiveDocument().getBody() 
    body.appendImage(chart).setLinkUrl('http://mychart'); 
    //here we're inserting directly in the body, a wrapping paragraph element will be created for us 
} 

function updateImage() { 
    var data = Charts.newDataTable().addColumn(
    Charts.ColumnType.STRING, 'Fruits').addColumn(
    Charts.ColumnType.NUMBER, 'Amount').addRow(
    ['Apple',Math.floor(Math.random()*31)]).addRow(//random int between 0 and 30 
    ['Orange',Math.floor(Math.random()*31)]).addRow(
    ['Banana',Math.floor(Math.random()*31)]).build(); 
    var chart = Charts.newPieChart().setDataTable(data).build(); 

    var img = getMyImg(DocumentApp.getActiveDocument().getBody(), 'http://mychart'); 
    //let's insert on the current parent instead of the body 
    var parent = img.getParent(); //probably a paragraph, but does not really matter 
    parent.insertInlineImage(parent.getChildIndex(img)+1, chart).setLinkUrl('http://mychart'); 
    img.removeFromParent(); 
} 

function getMyImg(docBody, linkUrl) { 
    var imgs = docBody.getImages(); 
    for(var i = 0; i < imgs.length; ++i) 
    if(imgs[i].getLinkUrl() === linkUrl) 
     return imgs[i]; 
    return null; 
} 

关于LINK_URL，当然你可以不喜欢Lucidchart确实并链接回你的网站。所以它不仅仅是为用户打破。

Answer 2

看看我的附加组件PlantUML Gizmo。

这里的代码插入图像功能，这与更换图片，如果有一个已经选择交易：

function insertImage(imageDataUrl, imageUrl) { 
    /* 
    * For debugging cursor info 
    */ 
// var cursor = DocumentApp.getActiveDocument().getCursor(); 
// Logger.log(cursor.getElement().getParent().getType()); 
// throw "cursor info: " + cursor.getElement().getType() + " offset = " + cursor.getOffset() + " surrounding text = '" + cursor.getSurroundingText().getText() + "' parent's type = " + 
// cursor.getElement().getParent().getType(); 
    /* 
    * end debug 
    */ 
    var doc = DocumentApp.getActiveDocument(); 
    var selection = doc.getSelection(); 
    var replaced = false; 
    if (selection) { 
    var elements = selection.getSelectedElements(); 
    // delete the selected image (to be replaced) 
    if (elements.length == 1 && 
     elements[0].getElement().getType() == 
     DocumentApp.ElementType.INLINE_IMAGE) { 
      var parentElement = elements[0].getElement().getParent(); // so we can re-insert cursor 
      elements[0].getElement().removeFromParent(); 
      replaced = true; 
      // move cursor to just before deleted image 
      doc.setCursor(DocumentApp.getActiveDocument().newPosition(parentElement, 0)); 
    } else { 
      throw "Please select only one image (image replacement) or nothing (image insertion)" 
    } 
    } 
    var cursor = doc.getCursor(); 
    var blob; 

    if (imageDataUrl != "") { 
    blob = getBlobFromBase64(imageDataUrl); 
    } else { 
    blob = getBlobViaFetch(imageUrl); 
    } 

    var image = cursor.insertInlineImage(blob); 

    image.setLinkUrl(imageUrl); 

    // move the cursor to after the image 
    var position = doc.newPosition(cursor.getElement(), cursor.getOffset()+1); 
    doc.setCursor(position); 

    if (cursor.getElement().getType() == DocumentApp.ElementType.PARAGRAPH) { 
    Logger.log("Resizing"); 
    // resize if wider than current page 
    var currentParagraph = DocumentApp.getActiveDocument().getCursor().getElement().asParagraph(); 
    var originalImageWidth = image.getWidth(); // pixels 
    var documentWidthPoints = DocumentApp.getActiveDocument().getBody().getPageWidth() - DocumentApp.getActiveDocument().getBody().getMarginLeft() - DocumentApp.getActiveDocument().getBody().getMarginRight(); 
    var documentWidth = documentWidthPoints * 96/72; // convert to pixels (a guess) 
    var paragraphWidthPoints = documentWidthPoints - currentParagraph.getIndentStart() - currentParagraph.getIndentEnd(); 
    var paragraphWidth = paragraphWidthPoints * 96/72; // convert to pixels (a guess) 

    if (originalImageWidth > paragraphWidth) { 
     image.setWidth(paragraphWidth); 
     // scale proportionally 
     image.setHeight(image.getHeight() * image.getWidth()/originalImageWidth); 
    } 

    } 

}