JavaScriptで画像フォーマット変換と縮小
2015年07月27日 12時15分41秒
こんにちは、ピーターです。
JavaScriptで画像フォーマットの変換と、幅と高さを縮小する必要があったので調べてみました。
今はJavaScriptだけで簡単にできるんですね。
備忘録としてサンプルを作成しました。
このソースだけで試せますのでよかったら試してみてください。
最近は脱jQueryを目指しています。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<title>JavaScriptで画像フォーマット変換と縮小</title>
</head>
<body>
<form>
<span id="file-wrapper">
<input type="file" multiple id="file">
</span>
<table>
<tr>
<td>縮小率</td>
<td>
<select id="scale">
<option>1.0</option>
<option>0.5</option>
<option>0.25</option>
</select>
</td>
</tr>
<tr>
<td>画像フォーマット</td>
<td>
<select id="format">
<option value="image/jpeg">JPEG</option>
<option value="image/png">PNG</option>
</select>
</td>
</tr>
<tr>
<td>品質 (JPEGのみ)</td>
<td>
<select id="quality">
<option>1.0</option>
<option>0.5</option>
<option>0.25</option>
</select>
</td>
</tr>
</table>
</form>
<!-- ここに画像を表示 -->
<ol id="images"></ol>
<script>
(function($) {
var fileWrapper = $('file-wrapper');
var fileSelecter;
var scaleSelecter = $('scale');
var formatSelecter = $('format');
var qualitySelecter = $('quality');
var images = $('images');
var fileChangehandler = function () {
var files = this.files;
for (var i = 0, n = files.length; i < n; i++) {
var reader = new FileReader();
reader.onload = function () {
var image = new Image();
image.onload = function () {
image.onload = undefined;
// canvasを生成
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// drawImageでcanvasに画像が描画される。
// drawImageの第三引数と第四引数を指定すると
// そのサイズに画像が拡大・縮小される。
// その場合、拡大・縮小後のサイズと
// canvasのサイズを合わせておく必要がある
var scale = parseFloat(scaleSelecter.value);
canvas.width = image.width * scale;
canvas.height = image.height * scale;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// toDataURLの第一引数に変換後の画像フォーマットを指定
// jpegの場合、第二引数に品質レベルを0.0から1.0の間で指定可能
var quality = parseFloat(qualitySelecter.value);
image.src = canvas.toDataURL(formatSelecter.value, quality);
var li = document.createElement('li');
li.appendChild(image);
images.appendChild(li);
};
image.src = this.result;
};
reader.readAsDataURL(files[i]);
}
resetFileSelecter();
};
var resetFileSelecter = function () {
fileWrapper.innerHTML = fileWrapper.innerHTML;
fileSelecter = $('file');
fileSelecter.onchange = fileChangehandler;
};
resetFileSelecter();
})(function (id) {return document.getElementById(id);});
</script>
</body>
</html>
最近のコメント