Skip to main content
本文に 1572 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="file" onchange="onInputChanged(event)">
  <hr>オリジナルサイズ:<br>
  <img id="previewLarge">
  <hr>縮小サイズ:<br>
  <img id="previewSmall">
  
  <script>
    function onInputChanged(e) {
      var file = e.target.files && e.target.files[0];
      if (file != null) {
        var reader = new FileReader();
        reader.onload = onImageLoad;
        reader.readAsDataURL(file);
      }
    }
    function onImageLoad(e) {
      var largeData = e.target.result;
      var smallData = makeSmall(largeData);
      previewLarge.src = largeData;
      previewSmall.src = smallData;
    }
    
    // 画像データ(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();
    }
  </script>
</body>
</html>

サンプルコード:

サンプルコード:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="file" onchange="onInputChanged(event)">
  <hr>オリジナルサイズ:<br>
  <img id="previewLarge">
  <hr>縮小サイズ:<br>
  <img id="previewSmall">
  
  <script>
    function onInputChanged(e) {
      var file = e.target.files && e.target.files[0];
      if (file != null) {
        var reader = new FileReader();
        reader.onload = onImageLoad;
        reader.readAsDataURL(file);
      }
    }
    function onImageLoad(e) {
      var largeData = e.target.result;
      var smallData = makeSmall(largeData);
      previewLarge.src = largeData;
      previewSmall.src = smallData;
    }
    
    // 画像データ(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();
    }
  </script>
</body>
</html>

サンプルコード:

些細な修正
ソース リンク
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'"img");
  image.src = data;
  var width = image.naturalWidth;
  var height = image.naturalHeight;
  
  // 縮小する。今回は縦横それぞれ1/2
  var canvas = document.createElement('canvas'"canvas");
  canvas.width = width / 2;
  canvas.height = height / 2;
  canvas.getContext("2d").drawImage(image, 0, 0, width / 2, height / 2);

  // データURLにして返す。他にバイナリを返す toBlob() メソッドもあります。
  return canvas.toDataURL();
  // JPEG形式のほうが良い圧縮率が得られると思われます。
  // 第2引数は品質レベルで、0.0~1.0の間の数値です。高いほど高品質。
  // return canvas.toDataURL("image/jpeg", 0.5);
}

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();
}

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);

  // データURLにして返す。他にバイナリを返す toBlob() メソッドもあります。
  return canvas.toDataURL();
  // JPEG形式のほうが良い圧縮率が得られると思われます。
  // 第2引数は品質レベルで、0.0~1.0の間の数値です。高いほど高品質。
  // return canvas.toDataURL("image/jpeg", 0.5);
}
コードを保存ミス
ソース リンク
mysticatea
  • 1,173
  • 6
  • 14

HTML/JavaScript で画像データを縮小するには、<canvas>を利用する方法があります。
Canvas に縮小サイズで描画した後、Canvas 自体を画像データとして取得する感じです。

動くデモ: http://jsbin.com/bibihixuka/1/edit?html,outputhttp://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();
}

HTML/JavaScript で画像データを縮小するには、<canvas>を利用する方法があります。
Canvas に縮小サイズで描画した後、Canvas 自体を画像データとして取得する感じです。

動くデモ: http://jsbin.com/bibihixuka/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();
}

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
読み込んでいます