var input = document.getElementById('input'), canvas = document.getElementById('canvas'), _image = document.createElement('image'), reader = new FileReader(); // 読み込んだときの動作 reader.onload = function() { // 大きい画像を_image.srcにresultで入れた後, // ノンタイムでdrawImageに渡すと描画されないためloadを待つ _image.onload = function() { // てきとーにwidthが800以上なら0.3倍にスケール var ratio = (_image.width > 800) ? 0.3 : 1, ctx = canvas.getContext('2d'); canvas.width = _image.width * ratio; canvas.height = _image.height * ratio; ctx.scale(ratio, ratio); ctx.drawImage(_image, 0, 0); }; _image.src = reader.result; }; input.addEventListener('change', function(e) { // ここではmultiple属性は考慮しない var file = this.files[0]; // MIMEタイプが画像系のモノのみ if ( file.type.indexOf('image') === -1 ) { return; } // 画像プレビューを扱えるようにデータURLで読み込む reader.readAsDataURL(file); });
<canvas id="canvas"></canvas> <form aciton="" method="post"> <input id="input" type="file" name="testinput" value=""> </form>