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

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

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3195閲覧

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

higehige

総合スコア12

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/12/11 10:50

編集2020/12/11 10:51

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

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

以下がコードです。

java

1 function shotPages(form) { 2 // PDF化するdivを取得 3 var pages = document.getElementsByClassName("printing-page"); 4 // 印刷するページの数だけループ 5 for(i=0;i<pages.length;i++){ 6 html2canvas(pages[i],{ 7 scale: 2 // 画質向上 8 }).then(function(canvas){ 9 var imgData = canvas.toDataURL(); 10 form.append('page[]', imgData); 11 }) 12 }; 13 return new Promise(resolve => { 14 resolve(form) 15 }) 16 } 17 18function sendPages(form) { 19 $.ajax({ 20 headers: { 21 'X-CSRF-TOKEN': $('meta[name="token"]').attr('content') 22 }, 23 type:'POST', 24 url:'./generate_pdf', 25 data: form, 26 enctype: 'multipart/form-data', 27 processData : false, 28 contentType : false, 29 success: function () { 30 alert('成功!'); 31 }, 32 error: function () { 33 alert('失敗'); 34 } 35 }); 36 return new Promise(resolve => { 37 resolve('完了!') 38 }) 39} 40 41// ボタンクリックで動作 42$('#genarate_pdf').on('click',function(){ 43 // 画像を送信するためのフォームデータを作成 44 var form = new FormData(); 45 shotPages(form) 46 .then(form => { 47 return sendPages(form) 48 }) 49 .then(msg => { 50 console.log(msg) 51 }) 52});

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

java

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

javascript

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

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

javascript

1function shotPages(form) 2{ 3 // PDF化するdivを取得 4 var pages = document.getElementsByClassName("printing-page"); 5 6 return Promise.all 7 ( 8 Array.from(pages).map(page=>html2canvas(page,{scale:2})) 9 ) 10 .then(canvases=>//canvasの配列が入っています。 11 { 12 canvases.forEach(c=> 13 { 14 form.append("page[]",c.toDataURL()); 15 }); 16 return form; 17 }); 18}

投稿2020/12/12 19:07

AT_2nd

総合スコア266

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

higehige

2020/12/15 10:54

ご丁寧にコードまで提示して頂き、本当にありがとうございます!! プロミスについての根本的な理解ができていませんでした。 頂いたコードをもとに試してみたところ、無事に順序だてて動かすことができました。 ただ、 canvases.forEach(c=> { form.append("page[]",c.toDataURL()); }); ここのループで、page[]のなかがnullになってしまう現象が起きており、現在模索中です。。 (console.logだと、c.toDataURL()の値はきちんと表示されるのになぜかこのループ内だとformに入らないという。。) もう少し格闘してみます。
higehige

2020/12/17 01:19

すみません! form.append('page[]', imgData); を form.append('page', imgData); とすることで、無事解決できました!! 悩んでおりましたので、とても助かります! 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問