この記事でやること
- Googleドライブ内の画像ファイルIDを指定して読み込む
- encodeBase64ボタンをクリックしたら
- 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/thumbnail?sz=w1000&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>
|
