Google Scriptでスプレッドシートに画像を保存する

Question

jSignatureを使用してGoogleシートに署名パッドを追加しようとしています。

//Code.gs 
function showDialog() { 
    var html = HtmlService.createHtmlOutputFromFile('Page') 
    .setWidth(400) 
    .setHeight(300); 
DocumentApp.getUi() 
    .showModalDialog(html, 'Your Signature is Required'); 
} 

//Page.html 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script> 

Please draw your signature on the signature pad below: 

<div id="signature"></div> 

<img id="rendered" src=""> 

<script> 
    $("#signature").jSignature({ 
    'background-color': 'transparent', 
    'decor-color': 'transparent' 
    }); 

    function renderSignature(){ 
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default')); 
    } 
</script> 

<input type="button" value="Render" onclick="renderSignature();"/> 
<input type="button" value="Add to Sheet" onclick="//What to do"/> 
<input type="button" value="Close" onclick="google.script.host.close()" /> 

唯一のことは、私はセルに画像を取得する方法を見つけ出すことができないです。私はこのような署名を記録し、ダイアログボックスを追加しました。コピー/ペーストは機能しません。私が知る限り、それを挿入する必要があります。 Googleドライブに保存してURLを使用して挿入する機能を作成しても構わないと思っていましたが、実際の画像を取得する方法を把握することはできません。どんな洞察も高く評価されています。

Answer 1

あなたはこの

のHTMLコードのような何か行うことができますあなたのドライブに画像を保存するには：あなたはトラックを保持する必要があります

function showDialog() { 
    var html = HtmlService.createHtmlOutputFromFile('Sign') 
    .setWidth(400) 
    .setHeight(300); 
SpreadsheetApp.getUi() 
    .showModalDialog(html, 'Your Signature is Required'); 
} 

function saveImage(bytes){ 
    var bytes = bytes.split(",") 
    var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png'); 
    blob.setName("Sign Pic") 
    DriveApp.getFolderById("Folder ID to save SignPic").createFile(blob) 
} 

：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script> 

Please draw your signature on the signature pad below: 

<div id="signature"></div> 

<img id="rendered" src=""> 

<script> 
    $("#signature").jSignature({ 
    'background-color': 'transparent', 
    'decor-color': 'transparent' 
    }); 

    function renderSignature(){ 
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default')); 
    } 

    function saveImage(){ //This sends the image src to saveImages function 
    var bytes = document.getElementById('rendered').src 
    console.log(bytes) 
    google.script.run.saveImage(bytes) 
    } 
</script> 

<input type="button" value="Render" onclick="renderSignature();"/> 
<input type="button" value="Add to Sheet" onclick="saveImage()"/> 
<input type="button" value="Close" onclick="google.script.host.close()" /> 

サーバー側のコードを画像ファイルの名前を入力し、それに従って画像をスプレッドシートに挿入します。