Skip to main content
2 / 4
コードを保存ミス
mysticatea
  • 1,173
  • 6
  • 14

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();
}
mysticatea
  • 1,173
  • 6
  • 14