LANG SELRCT

コードを書く場所についてはこちら

2019年5月9日木曜日

Googleドライブ内の画像をbase64にencodeしたデータを表示したい


この記事でやること

  1. Googleドライブ内の画像ファイルIDを指定して読み込む
  2. encodeBase64ボタンをクリックしたら
  3. 1の画像をbase64エンコードしたデータをimg_base64のsrcに入れる


var originalFileId = "ファイルID"

ファイルIDにGoogleドライブ内に保存した画像ファイルのIDを指定する



コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

var originalFileId = "ファイルID";//オリジナル画像

function returnImage() {
  var url = 'https://drive.google.com/uc?export=view&id=' + originalFileId;
  return url;
}

function returnBase64Data() {
  var id = originalFileId;
  var file = DriveApp.getFileById(id);
  var blob = file.getBlob();
  var content_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + content_type + ";base64, " + base64;
  return data;
}



index.html
<!DOCTYPE html>
<html>
<body>
  <button id="bt_base64">encodeBase64</button>
  <br>
  <img id="img">
  <img id="img_base64">
  <canvas id="canvas1"></canvas>
<script>
function elem(id) {
  return document.getElementById(id);
}

getImage();

elem('bt_base64').onclick = getBase64Data;

/************************************
オリジナル画像を読み込む
************************************/
function getImage() {
  google.script.run
    .withSuccessHandler(gotImage)
    .returnImage();
}

function gotImage(url) {
  document.getElementById("img").src = url;
}

/************************************
base64にエンコードした画像
************************************/
function getBase64Data() {
  google.script.run
    .withSuccessHandler(gotBase64Data)
    .returnBase64Data();
}

function gotBase64Data(data) {
  document.getElementById("img_base64").src = data;
}

</script>
</body>
</html>