JavaScriptで画像フォーマット変換と縮小
こんにちは、ピーターです。
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>
最近のコメント