html2canvasとは
htmlの要素を画像として保存する事の出来る、
javascriptライブラリです。
詳しい説明は下記記事を参考にしてみて下さい。もしくは、各々調べて下さい。。
https://qiita.com/7shi/items/ba7089e864fefac69808
検証方法
input:textに、テキストを入力して、
それを画面に表示させる。
(表示させるテキストにはcssを当てています)
で、それを画像として保存します。
1～9までの、数字を入力してそれを保存して、確認したら、画素数は 685×138 でした。
テキストを増やして、どのくらいの画素数まで、
大きく出来るのか試してみます。
横サイズの限界を検証してみた結果、
約65480pxが横サイズの限界だという事が分かりました。
続いては、縦サイズの限界を検証します。
横の限界が約65480pxというのが、分かったので、
今度はそれを、改行→貼り付け、改行→貼り付け...を、
画像保存が出来なくなる直前まで、繰り返していきます。
その結果、縦の限界サイズは、約4000pxという事が分かりました。
検証結果
html2canvsで保存出来る画像の最大画素数は、
(画素数を計算します)
65480×4000= 261,920,000
約2億6千万画素でした。
ですが、もっと画素数のある
画像を、以下の方法で生成に成功しました。
さっきの方法だと、幅が大きすぎて
一回の、改行→貼り付けで、
画素数が増えすぎてしまいます。
なので、横幅を削って
先ほどと同じように、下に伸ばしていきます。
(こっちの方が、より細かく画素数を増やしていける)
結果
18861×14215 = 268,109,115
約2億7千万画素
※
横幅をもっと、小さくすれば、さらに細かく
画素数を増やせると思ったかもしれませんが、
横幅を16000pxにして、下に伸ばしていったら、
縦幅の最大が大体16020px位でした。
16000×16020=256,320,000
2億五千6百万画素
横を削って、細かく画素数を調節していこうと思ったら、
最大画素数はむしろ、小さくなってしましました。
(縦サイズの制限が影響してるのかな?)
最終的な結論として、先ほどの、
約2億7千万画素が最大画素数だと考えてもらえれば大丈夫です。