投稿者 tel | 2014年5月22日

CanvasのtoDataURLの速度

toDataURLを使うとCanvasに描いた画像をData URIとして取得できる。特にサーバなどに描いた画像を送る場合に使う。

大きな画像だと処理速度が心配だったので計測してみた。

http://jsdo.it/sapphire_al2o3/xTQm

計測結果

  • PNG: 単色
  • PNG random: ランダムな色
  • JPEG quality 1.0: 単色。品質を1.0
  • JPEG quality 0.5: 単色。品質を0.5
  • 単位はms

デスクトップ Chrome 35

PNG 256×256 7
PNG 512×512 82
PNG 1024×1024 137
PNG random 256×256 27
PNG ramdom 512×512 80
PNG ramdom 1024×1024 311
PNG 250×250 2
PNG 500×500 36
PNG 1000×1000 93
JPEG 256×255 quality 1.0 4
JPEG 512×512 quality 1.0 22
JPEG 1024×1024 quality 1.0 74
JPEG 256×255 quality 0.5 7
JPEG 512×512 quality 0.5 35
JPEG 1024×1024 quality 0.5 46

デスクトップ Firefox 29

PNG 256×256 25
PNG 512×512 35
PNG 1024×1024 112
PNG random 256×256 20
PNG ramdom 512×512 80
PNG ramdom 1024×1024 318
PNG 250×250 16
PNG 500×500 53
PNG 1000×1000 113
JPEG 256×255 quality 1.0 16
JPEG 512×512 quality 1.0 28
JPEG 1024×1024 quality 1.0 110
JPEG 256×255 quality 0.5 13
JPEG 512×512 quality 0.5 31
JPEG 1024×1024 quality 0.5 113

Nexus7 2012 Chrome 34

PNG 256×256 12
PNG 512×512 65
PNG 1024×1024 253
PNG random 256×256 78
PNG ramdom 512×512 392
PNG ramdom 1024×1024 1341
PNG 250×250 11
PNG 500×500 67
PNG 1000×1000 223
JPEG 256×255 quality 1.0 13
JPEG 512×512 quality 1.0 67
JPEG 1024×1024 quality 1.0 223
JPEG 256×255 quality 0.5 15
JPEG 512×512 quality 0.5 60
JPEG 1024×1024 quality 0.5 222

何回か実行すると結構、値に幅があるのであくまでも目安としてこのくらい。

まとめ

  • 複雑な画像のほうが処理時間がかかる。
  • Jpegの場合、クォリティを下げると速くなるかもしれない。
  • モバイルで大きな画像を変換する場合は時間がかかるので注意が必要。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。