Hello Absurd World!

Exifを保ったままJPEG画像を縮小
※上記のリンクはこの記事の内容を継承したアップデート記事


Resize a image with HTML5 and JavaScript

Javascriptでローカルファイルを読み込んで表示

ローカルのファイルをブラウザに読み込めることを知った。最近のカメラで撮った画像はやたら画素数が高い。その縮小処理をサーバ側でなく、クライアントでやっておいてくれると助かる。そこで、ローカルで画像の縮小処理をする方法を考えた。

・HTML5でcanvasが加わった。使えそうな気がするので試してみる。

調べてみたところ以下の手順でできそうだった（ちょっと端折った書き方をするけど）。
FileReader.readAsDataURL()で読み込む→
読み込んだデータをImage().srcに入れる（imgとする）→
任意のwidth,heightのcanvasを用意→
imgをcanvasに背景として入れる（ここで任意の倍率にサイズ変換できる）→
toDataURL()でcanvasを、ブラウザでJPEGとして使えるかたちにエンコード

※ブラウザでの画像縮小アルゴリズムがあまりろよしくないようなので、大きい画像の縮小はレタッチソフトに任せた方が良い

データの送出とサーバ側での画像データの扱いはリンクへ
http://elicon.blog57.fc2.com/blog-entry-107.html

<input type="file" id="files" class="form" name="files[]" multiple />

IMAGES = [];
function resizeImg(image_data){
    var img0 = new Image();
    img0.src = image_data;
    var canvas0 = document.createElement('canvas');

    var width = img0.width;
    var height = img0.height;
    var chouhen = (width>=height) ? width : height;
    var new_size = 1024;  //px
    if (chouhen < new_size){
        var canvaswidth = width;
        var canvasheight = height;
    }
    else{
        var canvaswidth = parseFloat(new_size)/chouhen * width;
        var canvasheight = parseFloat(new_size)/chouhen * height;
    }
    canvas0.width = parseInt(canvaswidth);
    canvas0.height = parseInt(canvasheight);

    var context = canvas0.getContext("2d");
    context.drawImage(img0, 0, 0, canvaswidth, canvasheight);
    var resized_img = canvas0.toDataURL("image/jpeg");
    return resized_img;
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          IMAGES.push(resizeImg(e.target.result));
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);