JavaScriptで出力したbase64の文字列を、ページ間で受け渡したいのですが、post送信するととても重いです。何か軽くする方法はあるでしょうか？

Question

JavaScriptで、canvasをtoDataURL()でbase64に変換し、それをpost送信してphpでpng画像に変換しています。
ですがbase64の文字列がとても長いので、post送信がとても遅いのですが、base64を軽くする良い方法はあるでしょうか？

Answer 1

圧縮すれば転送トラフィックを削減できますね。
サーバサイドで解凍処理が必要になるので転送速度と圧縮/解凍速度のトレードオフになりますが。

• lz-string: JavaScript compression, fast! - pieroxy.net
• zip.js

後は「サーバ側の回線が細すぎないか」「サーバのスペックが足りているか」「canvasのサイズが大きすぎたら削減できないか」等、他の方向でも動作が重い原因を調査する必要があると思われます。

Re: chibi さん

Comments

[chibi]

回答していただきありがとうございます。
https://st40.xyz/one-run/article/149/
↑このページで、lz-stringでbase64の文字列の圧縮と解凍をやってみると、文字列が長くなってしまいました。
35010 byte→34425 byte

[think49]

重いのは本当に「転送速度」が原因ですか。
35010 byteの転送にそれほど時間がかかるとは思えないので、実測値を出した方が良いと思います。

[chibi]

35010 byteくらいの画像を2個送信してるのですが、30秒くらいかかってしまいます。

[tacsheaven]

仮にモバイルWi-Fi系で大量送受信して速度制限がかかったとしても、128Kbps（=12.8KB/sec以上）は出ますから、そのサイズならファイルアップロード自体は5秒程度です。実際の WAN や LAN なら一桁上の速度は軽く出ますから、30秒くらいかかるとするとサーバ側で時間のかかる処理をしてませんか。

[think49]

To: chibi さん
実測値とは「転送速度」と「転送後のサーバサイド処理」を比較できるPHPファイルを2つ用意するという事です。
現在のコードが a.php だとすれば、b.php という「転送された文字列をechoするだけの処理」を作って a.php と比較してみてください。
もしくは、c.html にpostしてもいいでしょう。
転送後の処理は不要なので転送のみの純粋な時間が計測できるはずです。
このように複数の環境を用意する事でボトルネックになっている部分がどこなのかを切り分ける事が可能になります。

[chibi]

転送先の処理をechoだけにしても、速さは同じくらいです。転送する画像を1枚にすると、だいぶ早くなります。

[think49]

「画像ファイル1つ=15秒」「画像ファイル2つ=30秒」ならphp処理コストはほぼ0で転送に「35010 byteの転送に15秒かかる」と想像できますが、内訳はどうなっているのでしょう。
また、念のため確認しますが、「JavaScriptの処理時間は含めていない」という認識で良いでしょうか。
つまり、「POST送信開始してからサーバサイド処理が完了するまでの時間」を計測し、POST中に余計なJavaScript処理は走っていない必要があります。
(今更気が付きましたが、オリジナルの画像ファイルが非圧縮形式でない限りは元々圧縮されているので、仮にLZW/ZIP形式で圧縮してもサイズ削減効果は期待できないですね)

Answer 2

大きいファイルなのでしたらそういうものだと思いますが
場合によってはJSZipが使えるかもしれません