<!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>