質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

GASでキャンバスの画像ファイルをgoogleドライブに保存

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,183

keisuke1999

score 12

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

google apps scriptを使用してcanvasを画像変換してスプレッドシートにURLを保存しgoogleドライブにも画像を保存。またファイルをアップロードしてgoogleドライブに保存それをスプレッドシートに転送したいのですが、キャンバスの画像をgoogleドライブに保存とアップロードしたファイルをスプレッドシートに転送のところがうまくいきません。
どなたか教えて頂けないでしょうか?
よろしくお願いします。

該当のソースコード

HTMLとJavaScript
<body>
<div id="formDiv">

  <form id="myForm" method="post" action="アプリケーション公開ID">
    <p>
      <label>名前:<input type="text" name="name"></label>
    </p>

    <input id="signature" name="signature" value="">
        <button id="reset">リセット</button>


  <canvas id="cancan" width="560" height="280" style="border: 2px solid;"></canvas>


    <a id="hiddenLink" download="canvas.png">link</a>


    <img id="canvasImage" src="dummy.png">


<button onclick="downloadCanvas()">sss</button>
   ファイルを選択して下さい: <input name="myFile" type="file" /><br/>
  <input id="save" type="button" value="送信" onclick="
      toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
  </form>
</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
アップロード中・・・・
</div>

<div id="output">
  <!-- Blank div will be filled with "Complete.html" after form submission. -->
</div>


  <script>

  function updateOutput(resultHtml) {

    toggle_visibility('inProgress');


    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }



        let canvas = document.querySelector("canvas");
        let signaturePad = new SignaturePad(canvas);
        $('#reset').click(function () {
            signaturePad.clear();
        });


         function downloadCanvas() {
            let canvas = document.getElementById('cancan')
            let link = document.getElementById('hiddenLink')
            link.href = canvas.toDataURL()
            $("#signature").val(link);
            document.getElementById('canvasImage').src = canvas.toDataURL()

            link.click()
        }


    </script>
</body>

コード.gs

function doGet(){
return HtmlService.createTemplateFromFile("form").evaluate();
}

function doPost(e){
var sheet = SpreadsheetApp.openByUrl("スプレッドシートID")
.getSheetByName("sheet");
//データ取得

var name = e.parameter.name;
var signature = e.parameter.signature;
var myFile=e.parameter.myFile;
var date = new Date();

var array = [date,name,signature,myFile];
sheet.appendRow(array);

}

var folderId = "フォルダID";

function doGet(e) {

var template = HtmlService.createTemplateFromFile('form.html');
return template.evaluate();

}

function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);

var template = HtmlService.createTemplateFromFile('Complete.html');  

template.fileUrl = doc.getUrl();

return template.evaluate().getContent();
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • papinianus

    2019/05/15 07:32

    具体的にこのコードでどこまでできているのか追記お願いできませんか?

    キャンセル

  • keisuke1999

    2019/05/15 10:48 編集

    コメントありがとうございます。
    今回、Formで電子サイン(canvas)とcanvasとは別で添付画像ファイルをスプレッドシートに追記して、それらの画像ファイルをgoogleドライブに保存できるようなツールを実装したいと思っています。
    ◼️実装できている事
    ・canvasのファイルをダウンロードし、画像URLを作成してスプレッドシートにURLを追記
    ・formにファイルを添付して送信時にgoogleドライブの指定フォルダに保存
    ◼️実装できない事
    ・canvasのファイルデータをgoogleドライブの指定フォルダに保存
    ・formの画像添付ファイルのURLをgoogleスプレッドシートに追記

    説明が分かりづらくて申し訳ございません、よろしくお願い致します。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る