更新/替換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); 
    } 

    } 

}