Javascriptを使い非同期でAPIにCanvas上に表示された画像をPOSTして返り値を処理する方法

###実現したいこと
現在Video上のコマをCanvasに描き、APIにアップロードする処理を実装したく様々なサイトを回っていたのですが、Javascript初心者なもので、結局実装方法がよく理解できずこちらに質問させていただいた所存です。
実装したい処理以下のとおりです。

videoに表示されているコマをボタンでCanvasに書き出し（実装済み）
書き出した画像をyabumiという画像共有サービスのAPIにPostする。（APIリファレンス）
処理中はアップロードボタンをクリック不能に、事前に用意しておいたローディングGifのdisplay:noneを外し可視化、できればアップロード進捗をパーセント化しプログレスバーにして表示（未実装）
Postを完了するとjsonが帰ってくるので、そのjsonを処理してURLを抽出、新しいタブで開く。クリック不能にしたボタンを復帰（未実装）
Boostrapを利用しているので、クリックを無効にする処理はクラス追加のみで行えます。（disabled）
ページは移動せず、バックグラウンド（非同期？）で実行する。

以上の処理を実行するにはどのようなコードを書けば良いのでしょうか。お暇であればご回答よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

躓いている部分のみ実装してみました。
ヒントとして見てください。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="jquery-2.1.4.min.js"></script>
        <script>
            function draw() {
              // ここは動画をコマ抽出したロジックに読み替えてください。
              var canvas = document.getElementById('koma');
              if ( ! canvas || ! canvas.getContext ) {
                return false;
              }
              var ctx = canvas.getContext('2d');
              ctx.beginPath();
              ctx.moveTo(20, 20);
              ctx.lineTo(120, 20);
              ctx.lineTo(120, 120);
              ctx.lineTo(20, 120);
              ctx.closePath();
              ctx.stroke();
            }
            
            function setExpiresAtAndCommt(f) {
                var ret = confirm("送信します。よろしいですか？");
                
                if(ret == false) return false;
                
                var canvas = document.getElementById('koma');
                var base64Data = canvas.toDataURL().split(',')[1];
                var data = window.atob(base64Data);
                var buff = new ArrayBuffer(data.length);
                var arr = new Uint8Array(buff);
                
                for( var i = 0; i < data.length; i++){
                    arr[i] = data.charCodeAt(i);
                }
                var blob = new Blob([arr], {type: 'image/png'});
                
                var formData = new FormData();
                formData.append('imagedata', blob);
                formData.append('name', f.name.value);
                formData.append('expiresAt', new Date(Date.now() + 86400000).toISOString());
        
                $.ajax({
                    type: 'POST',
                    url: 'https://yabumi.cc/api/images.json',
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data, textStatus){
                        $("#kekka").html(data.url);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        alert('Error! ' + textStatus + ' / ' + errorThrown);
                    }
                });
                
                return false;
            }
        </script>
    </head>
    <body onload="draw();">
        <form name="f" method="post" onsubmit="return setExpiresAtAndCommt(this);">
            ファイル名：<input type="text" name="name" value="" />
            <input type="submit"/>
        </form>
        <canvas id="koma" width="140" height="140"></canvas>
        <div id="kekka"></div>
    </body>
</html>