>HTMLを画像に変換する「html2canvas.js」の変換速度を高速化する[Base64/リロード対策]JavaScriptでHTMLを画像に変換するオープンソースの「html2canvas.js」ですが、何も対策を施さないまま使用するとHTML内にある元の画像が「変換」するたびにリロードされる設定になっています。変換対象のHTMLにある画像がBase64形式の場合はアスキーですので変換速度が極端に落ちます。今回はこれらを対策する事によって変換速度を向上する方法をご紹介します。HTMLから画像に変換するはじめての方は公式サイトで変換のテストをすることができます。(英語)※IEにはPromiseオブジェクトがありませんのでPolyfillライブラリの「native-promise-only」の「npo.src.js」もダウンロードします。style="color:green;">プチモンテ</div><p>この下にあるのが画像です。</script></body></html>[実行結果]14行目で変換を実行します、成功すると15行目、失敗すると17行目が実行されます。「then」「catch」はPromiseオブジェクトの機能です。変換対象のHTML内にBase64形式の画像があると、変換速度が極端に遅くなります。回避策としては画像をwindow.URL.createObjectURLで「オブジェクトURL」にする方法があります。Blob([buffer]));bufferに「ArrayBuffer」や「Uint8Array」の画像データを指定します。戻り値のURLがオブジェクトURLで「blob:」形式の文字列となります。このURLを変換対象のHTMLのimg.srcに埋め込みます。問題なのが「html2canvas」では「blob:」形式には未対応ですので、対応できるように「html2canvas」のソースコードを修正します。}};修正といってもコードを追記しているだけです。次はリロード対策です。リロード対策html2canvas.jsは画像に変換する際に、html2canvas.jsが読み込まれているHTML全体をリロードします。問題となるのが画像です。変換とは無関係な画像が大量にあると無駄に変換時間がかかってしまいます。次のコードはHTMLを3回、画像に変換します。onclick="OnClick();">実行</button><p>この下にあるのが画像です。</p></body></html>[実行結果]最初のエラーは「none.jpg」が無いよというHTMLのエラーです。残りの3回はhtml2canvas.jsがリロードして発生した3回のエラーです。※html2canvas.jsのソースコードを見る限りでは、SCRIPTタグはリロードしないようです。その他の詳細はソースをみると早いです。回避策この画像のリロードを回避するにはメインページとは別に「変換するページを作成」して「iframe」タグで読み込むようにすれば良いです。onclick="OnClick();">実行</button><p>この下にあるのが画像です。</p></body></html>[実行結果]表示されているエラーはHTML側でのエラーだけとなりましたね。iframeのエリアはCSSで枠を消していますので、実際2ページあるのが見た目は1ページに見えますね。(3)このブログについてオープンソースGitHubで複数のオープンソースを公開。Webアプリこのブログのマスターが作成した無料ツールです。(オープンソース)ブラウザで8/16/24/32bitの相互変換。Webの逆アセンブラブラウザでEXE/DLLファイルを逆アセンブルする※その他にも「プチラボ」でアプリを多数公開しています。3Dゲームこのブログのマスターが作成した無料ゲームです。短時間で遊べるファンタジーのオンラインRPG風ほのぼの癒し系のスマホアプリ※その他は「@ゲーム」で公開しています。※インストール不要でそのまま遊べます。スマートフォンこのブログのマスターが作成した無料アプリです。お主の画像減色お手軽にカメラの写真や画像を「高品質に減色」するお主は誰だ。(女性向け)ロボットこのブログのマスターが作成したロボットです。