「html2canvas」で意図通りにJavaScriptのPromiseが動かない件

Question

Chart.jsのグラフを含んだ複数ページのレポートを、html2canvasを使ってキャプチャして、PDF生成するシステムを作っています。
フレームワークはLaravel。Ajaxでの送信を試みています。

html2canvasでキャプチャするページ数が多いため、画像生成に時間がかかるため、画像生成を待ってからAjaxで送れるように、Promiseを使って送ろうとしています。

以下がコードです。

  function shotPages(form) {
    // PDF化するdivを取得
    var pages = document.getElementsByClassName("printing-page");
    // 印刷するページの数だけループ
    for(i=0;i<pages.length;i++){
      html2canvas(pages[i],{
      scale: 2 // 画質向上
      }).then(function(canvas){
        var imgData = canvas.toDataURL();
        form.append('page[]', imgData);
      })
    };
    return new Promise(resolve => {
        resolve(form)
    })
  }
    
function sendPages(form) {
  $.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
    },
    type:'POST', 
    url:'./generate_pdf',
    data: form,
    enctype: 'multipart/form-data',
    processData : false,
    contentType : false,
    success: function () {
      alert('成功！');
    },
    error: function () {
      alert('失敗');
    }
  });
  return new Promise(resolve => {
      resolve('完了！')
  })
}

// ボタンクリックで動作
$('#genarate_pdf').on('click',function(){
  // 画像を送信するためのフォームデータを作成
  var form = new FormData();
  shotPages(form)
    .then(form => { 
    return sendPages(form)
  })
    .then(msg => { 
      console.log(msg)
  })
});

この中で、どうしても、forループの後の

.then(function(canvas){
        var imgData = canvas.toDataURL();
        form.append('page[]', imgData);
      })

の箇所だけが、Promiseを指定しているにもかかわらず、すべてが終了してから動作してしまいます。
（Ajaxの送信時点では、formのpageがnullのためエラーが起きる）

ここの箇所だけ独立したPromise関数としたいとも考えたのですが、このthen以降はhtml2canvasライブラリの標準の記述方式のようで分解することができないでいます。
https://html2canvas.hertzen.com/

こちら、上記のthen以降を待ってから送信させるようにするための記述方法があれば、ご指南を頂けますと大変助かります。

お忙しい中、大変恐れ入りますが、よろしくお願い致します。

Answer 1

すべてが終了してから動作してしまいます。　の部分今一つ分からないですが、ソースを見る限り、shotPagesの中でformへのデータ追加が完了してからsendPagesに処理を渡したいという事でしょうか。

質問のコードの中では、promiseを作るだけ作って完了を待たずに次に行っているのがまずいです。

    for(i=0;i<pages.length;i++){
      html2canvas(pages[i],{
      scale: 2 // 画質向上
      }).then(function(canvas){
        var imgData = canvas.toDataURL();
        form.append('page[]', imgData);
      })//←完了のタイミングを無視している
    };
    //←forループを抜けても、promiseの中身はまだ実行中
    return new Promise(resolve => {
        resolve(form)
    })

解決方法としては、Promise.allでhtml2canvasがすべて完了するのを待ってformを作れば良いです。
※html2canvasから直接then(c=>form.append("page[]",c.toDataURL()))に繋げると、結果の順序が狂う可能性があります。

function shotPages(form)
{
    // PDF化するdivを取得
    var pages = document.getElementsByClassName("printing-page");

    return Promise.all
    (
        Array.from(pages).map(page=>html2canvas(page,{scale:2}))
    )
    .then(canvases=>//canvasの配列が入っています。
    {
        canvases.forEach(c=>
        {
            form.append("page[]",c.toDataURL());
        });
        return form;
    });
}

Comments

[higehige]

ご丁寧にコードまで提示して頂き、本当にありがとうございます！！
プロミスについての根本的な理解ができていませんでした。

頂いたコードをもとに試してみたところ、無事に順序だてて動かすことができました。

ただ、

canvases.forEach(c=>
{
form.append("page[]",c.toDataURL());
});

ここのループで、page[]のなかがnullになってしまう現象が起きており、現在模索中です。。
（console.logだと、c.toDataURL()の値はきちんと表示されるのになぜかこのループ内だとformに入らないという。。）

もう少し格闘してみます。

[higehige]

すみません！

form.append('page[]', imgData);
を
form.append('page', imgData);
とすることで、無事解決できました！！

悩んでおりましたので、とても助かります！
本当にありがとうございました！