將二進制圖像轉換為圖像並插入到 Google Doc - Google Apps 腳本

Question

我們擁有https://www.qr-code-generator.com/的許可證，它的 API 位於https://www.qr-code-generator.com/qr-code-api/

我在 Google 文檔中使用 Google Apps 腳本。

當我進行 API 調用時，我得到原始二進制圖像作為響應。

function APICall() {
  var url = "https://api.qr-code-generator.com/v1/create?access-token=dAlKmUnRsrPIFBLY_ix5YU0LRuMsNgM9MnFTmVHJwD4JRAeBmdzrPmmUAqi9zNyX";
  var options = {
    "method": "post",
    "payload":{
    "frame_name": "no-frame",
    "qr_code_text": "https://www.qr-code-generator.com/",
    "image_format": "PNG",
    "qr_code_logo": "scan-me-square",
    "download":1
    }
  };

  var response = UrlFetchApp.fetch(url, options);
  //return "Testing";
  return response;
}

我收到以下回復

SVG https://pastebin.com/nF2YHzux

JPG https://pastebin.com/8HCYdeEu

PNG https://pastebin.com/J68U2PMy

這是我開始遇到問題的地方。

我找不到將 QR 碼的實際圖像推送到我的 Google 文檔的好方法。

這是我發現的最接近的東西，但我不認為我可以將 SVG 嵌入到 Google 文檔中。

https://dev.to/benjaminblack/using-a-string-of-svg-as-an-image-source-8mo

  let svg = APICall();
  let blob = new Blob([svg], {type: 'image/svg+xml'});
  let url = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = url;
  image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});

但我得到“ReferenceError：Blob 未定義”。 我不確定這是否可能。

編輯包括調用 APICall() 的實際函數：

//This function currently has 2 purposes. I replace any instance of <<QR>> code as the text string that is returned from APICall()
function QRify(){

  var activeDoc = DocumentApp.getActiveDocument();
  var id = activeDoc.getId();
  var doc = DocumentApp.openById(id); //Get the ID of the copy
  
  var head = doc.getHeader();
  var body = doc.getBody(); //Get the body of the copy
  var foot = doc.getFooter();

  var replaceText = "<<QR>>";
  var code = APICall();

  //var img = new Image();
  //img.src = 'data:image/jpeg;base64,' + hexToBase64(code);

  //head.appendChild(img);
  
  let svg = APICall();
  let blob = new Blob([svg], {type: 'image/svg+xml'});
  let url = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = url;
  image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});
   
  
  Replace Strings with Form variables
    if(head != null){
      head.replaceText(replaceText, code);
    }

   if(body != null){
     body.replaceText(replaceText, code);
   }

   if(foot != null){
     foot.replaceText(replaceText, code);
   }
}

Answer 1

從您的顯示腳本中，我認為在這種情況下，可以從var response = UrlFetchApp.fetch(url, options);中檢索 blob。 . 當這反映在示例腳本中時，以下示例腳本如何？

示例腳本：

在此示例腳本中，文檔正文中的<<QR>>被替換為檢索到的圖像 blob。 所以，請把<<QR>>放在文檔正文中。 並且，在這種情況下，使用活動文檔作為示例。

function sample() {
  // Ref: https://tanaikech.github.io/2018/08/20/replacing-text-to-image-for-google-document-using-google-apps-script/ Author: me
  // Ref: https://stackoverflow.com/q/51912364
  var replaceTextToImage = function (body, searchText, image, width) {
    var next = body.findText(searchText);
    if (!next) return;
    var r = next.getElement();
    r.asText().setText("");
    var img = r.getParent().asParagraph().insertInlineImage(0, image);
    if (width && typeof width == "number") {
      var w = img.getWidth();
      var h = img.getHeight();
      img.setWidth(width);
      img.setHeight(width * h / w);
    }
    return next;
  };

  var doc = DocumentApp.getActiveDocument();
  var body = doc.getBody();
  var replaceText = "<<QR>>";
  var code = APICall();
  var blob = code.getBlob();
  do {
    var next = replaceTextToImage(body, replaceText, blob, 200);
  } while (next);
}

• 運行此腳本時，將從var code = APICall(); , <<QR>>被替換為圖像。
• 200 replaceTextToImage(body, replaceText, blob, 200)的 200 是圖像寬度。 請根據您的實際情況進行修改。

參考：

• 類 HTTPResponse