JavaScriptで縮小画像の作成


スマートフォンなどで撮影した写真をサーバーに転送したい場合、撮影された写真そのままではサイズが大きすぎてアップロードに時間がかかり、縮小してから送りたいといったことをしたいと思っていたら、またまたHTML5 テクニックバイブルに書いてありました。HTML5 テクニックバイブルすごい。

というわけで、上記の書籍を参考に下記のようなコードを書いてみた。

HTML

JavaScript

以下、実行サンプル。
画像を縮小して表示

やっていることは単純で、画像ファイルを選択すると、縮小用の画像サイズと同じcanvasを作成し、canvasオブジェクトのdrawImageメソッドで、画像を埋め込み、toDataURLメソッドでData URIを取得するというもの。こんな簡単にできるとは・・・。

今回は取得したData URIをimgタグで表示するようにしたサンプルを作成しましたが、これをそのままサーバーに送信したり、先日canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)で紹介したやり方でData URIをバイナリ形式にしてから送信するとサーバーに縮小画像を送信することができそうです。

2014年10月21日追記:
JavaScriptで縮小画像を作成してサーバーにPOST送信する方法 | while(isプログラマ)にて試してみました。

JavaScriptで縮小画像の作成” への2件のコメント

  1. 「JavaScriptで縮小画像の作成」大変勉強になりました。
    ありがとうございます。

    「画像を縮小して表示」サンプルと
    「canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)」のサンプルを元にして、
    「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」を試行錯誤しながら作っていますが、なかなか出来ません。
    そのやり方のサンプルを掲載されることを、とてもとても楽しみにいたしております。

    • コメントありがとうございます。自分が書いたブログが勉強になったと言っていただきうれしく思っています。
      ブログのネタもないので、「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」は近いうちに試してみようと思います。

コメントを残す

メールアドレスが公開されることはありません。