HTML/JavaScript で画像データを縮小するには、<canvas>
を利用する方法があります。
Canvas に縮小サイズで描画した後、Canvas 自体を画像データとして取得する感じです。
動くデモ: http://jsbin.com/bojowaseji/1/edit?html,output
サンプルコード:
// 画像データ(DataURL)を縮小して返す
function makeSmall(data) {
// 画像データの縦横サイズを取得する
var image = document.createElement('img');
image.src = data;
var width = image.naturalWidth;
var height = image.naturalHeight;
// 縮小する。今回は縦横それぞれ1/2
var canvas = document.createElement('canvas');
canvas.width = width / 2;
canvas.height = height / 2;
canvas.getContext("2d").drawImage(image, 0, 0, width / 2, height / 2);
return canvas.toDataURL();
}