【JavaScript】CANVASの画像をダウンロード

JavaScript 
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
    <title>CANVASによる画像縮小表示とダウンロード</title>
</head>
<body>
<div id="contents" style="margin:20px; border-top:solid 1px #000;">
  <h3>CANVASによる画像縮小表示とダウンロード</h3>
  <input id="inputFile" name="photo" type="file" accept="image/*" capture><br>
  <div><span id="msg"></span></div>
</div>
<p id="downloadButton"><a href="img.jpg">download</a></p>
<a download id="sample-download">ダウンロード</a>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
    // 同一パスに画像ファイルを置いておく
    $(function() { 
        // downloadButtonリンクをクリックした場合
        $('#downloadButton a').on('click', function(e){
             
            var hrefPath = $(this).attr('href');       
            var fileName = $(this).attr('href').replace(/\\/g,'/').replace( /.*\//, '' );
             
            $target = $(e.target);
            $target.attr({
                download: fileName,
                href: hrefPath
            });
        });
    });

  // 変更したら
  $('input[name=photo]').change(function(e) {
    // ファイル情報取得
    var file = e.target.files[0];
    var name = file.name;           // ファイル名
    var size = file.size;           // ファイルサイズ
    var type = file.type;           // ファイル形式
    var modify = file.lastModifiedDate;       // ファイル更新日
    
    // ファイル更新日の編集
    var y = modify.getFullYear();  
    var m = modify.getMonth() + 1;
    var d = modify.getDate();
    var w = modify.getDay();

    // 曜日の表記を文字列の配列で指定
    var wNames = ['日', '月', '火', '水', '木', '金', '土'];
    
    // 「月」と「日」で1桁だったときに頭に 0 をつける
    if (m < 10) {
      m = '0' + m;
    }
    if (d < 10) {
      d = '0' + d;
    }
    
    var modifyWork = y + '年' + m + '月' + d + '日 (' + wNames[w] + ')';
    // フォーマットを整形してコンソールに出力
    console.log(modifyWork);
    
    // ファイル情報編集
    var str = "名前:" + name + "<br>";
    str += "サイズ:" + size + "<br>";
    str += "タイプ:" + type + "<br>";
    str += "最終修正日時:" + modifyWork + "<br>";
      
    // ファイル情報を表示
    document.getElementById("msg").innerHTML = str;
    
    // ファイル形式がimageに一致する場合
    if (file.type.match(/image.*/)) {
      // canvasオブジェクトを作成
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext('2d');
      var image = new Image();
      var size = 1200;
      // 
      canvas.width = canvas.height = 0;
      image.src = URL.createObjectURL(file);
      image.onload = function() {
        var w = size, h = image.height * (size/image.width);
        canvas.width = w;
        canvas.height = h;
        // drawImageでcanvas上に画像を表示
        // drawImageの説明はhttp://www.html5.jp/canvas/ref/method/drawImage.html
        ctx.drawImage(image, 0, 0, w, h);

        var img = document.createElement('img');
        // 画像ファイル出力（出力時のコンテンツタイプを指定）
        img.src = canvas.toDataURL(file.type);

        var head = 'data:' + file.type + ';base64,';
        
        // ファイルサイズを
        var imgFileSize = Math.round((img.src.length - head.length)*3/4);
        
        // 変換前後のサイズを編集しcontentsに追加  
        $('#contents').append("<div><span>" + 
            "元画像サイズ" + (file.size/1024).toFixed(1) + "kb" + " => " + 
            "変換後サイズ" + (imgFileSize/1024).toFixed(1) + "kb" + "</span></div>")
        
        // サイズ縮小した画像情報をブラウザに表示
        $("#contents").append(img);
        
        // サイズ縮小した画像情報をhrefに設定
        document.getElementById("sample-download").href = img.src; 
      }
    }
  });

</script>
</body>
</html>