Decoding QR code on Google Slides using Google Apps Script

GasTips
Google Apps Script / image / qr code / Slides

Gists

This is a sample script for decoding a QR code put in Google Slides using Google Apps Script. In this case, Javascript is used at the opened dialog. And Canvas API and jsQR are used. So unfortunately, this method cannot be used with the time-driven trigger and the Google Apps Script project of the standalone type.

Of course, this method can be also used for Google Document and Google Spreadsheet. But at Google Spreadsheet, I recommend to retrieve the image of QR code with the fetch method from URL.

Demo

Flow

The flow of this sample script is as follows.

  1. Retrieve an image blob of QR code.
    • In this case, the image is retrieved from the Google Slides.
  2. Send the retrieved image to HTML side.
    • In this case, I used the HTML template.
  3. At HTML side, the image is rendered using canvas, and analyze the QR code using jsQR. Then, the data is retrieved.
  4. Send the retrieved data to Google Apps Script side.
  5. Put the data to the Google Slides.

Sample script

When you use this sample script, at first, please put a sample QR code to the 1st page of Google Slides. And, please copy and paste the following scripts to the container-bound script of Google Slides. And then, please run the function of getDataFromQRCode. By this, the image of QR code in the 1st page of Google Slides are used.

Google Apps Script: Code.gs

function getDataFromQRCode(data) {
  const slide = SlidesApp.getActivePresentation().getSlides()[0]; // The 1st page of Google Slides.
  if (!data) {
    const qrCode = slide.getImages()[0];
    const blob = qrCode.getBlob();
    const html = HtmlService.createTemplateFromFile("index");
    html.image = JSON.stringify(blob.getBytes());
    SlidesApp.getUi().showModalDialog(html.evaluate(), "sample");
    return;
  }
  slide.replaceAllText("Data: ", `Data: ${data}`);
}

HTML & Javascript: index.html

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script>
<canvas id="canvas"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = `data:image/png;base64,${btoa(String.fromCharCode(...new Uint8Array(Int8Array.of(...JSON.parse(<?= image ?>)).buffer)))}`;
  image.onload = () => {
    ctx.drawImage(image, 0, 0);
    const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const obj = jsQR(img.data, img.width, img.height);
    google.script.run.withSuccessHandler(google.script.host.close).getDataFromQRCode(obj.data);
  }
</script>

Note

  • When you use this script, please enable V8.

  • I created this sample script for studying to take advantage of Canvas API using Google Apps Script. If this sample was useful for you, I’m glad.

  • In this sample, the image of QR code is retrieved from Google Slides. Of course, for example, you can also decode from the URL of image with the QR code.

    function getDataFromQRCode(data) {
  const ui = SlidesApp.getUi();
  if (!data) {
    const blob = UrlFetchApp.fetch("### url of image with QR code ###").getBlob();
    const html = HtmlService.createTemplateFromFile("index2");
    html.image = JSON.stringify(blob.getBytes());
    ui.showModalDialog(html.evaluate().setWidth(200).setHeight(180), "sample");
    return;
  }
  ui.alert(data);
}

References

 Share!